[#. React] Kakao 카카오 지도 API를 이용해서 키워드로 장소 검색하기, 검색한 장소 마커 띄우기, 검색 결과 리스트 가져오기 2

 

 

 

 

 

 

 

키워드 검색 후 마커만 띄울 거라면 이 글을 참고하면 된다

앞글에 가서 kakao developers에서 앱키 발급 후 <script></script> 세팅만 하고 오자

 

 

developer0809.tistory.com/90

[#. React] Kakao 카카오 지도 API를 이용해서 키워드로 장소 검색하기, 검색한 장소 마커 띄우기

 

 

 

 

 

 

 

 

① 프로젝트/src/components/views/Landing/Sections/MapContainer.js

 

import React, { useEffect, useState } from 'react'

const { kakao } = window

const MapContainer = ({ searchPlace }) => {

  // 검색결과 배열에 담아줌
  const [Places, setPlaces] = useState([])
  
  useEffect(() => {
    var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 })
    var markers = []
    const container = document.getElementById('myMap')
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    }
    const map = new kakao.maps.Map(container, options)

    const ps = new kakao.maps.services.Places()

    ps.keywordSearch(searchPlace, placesSearchCB)

    function placesSearchCB(data, status, pagination) {
      if (status === kakao.maps.services.Status.OK) {
        let bounds = new kakao.maps.LatLngBounds()

        for (let i = 0; i < data.length; i++) {
          displayMarker(data[i])
          bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
        }

        map.setBounds(bounds)
        // 페이지 목록 보여주는 displayPagination() 추가
        displayPagination(pagination)
        setPlaces(data)
      }
    }

    // 검색결과 목록 하단에 페이지 번호 표시
    function displayPagination(pagination) {
      var paginationEl = document.getElementById('pagination'),
        fragment = document.createDocumentFragment(),
        i

      // 기존에 추가된 페이지 번호 삭제
      while (paginationEl.hasChildNodes()) {
        paginationEl.removeChild(paginationEl.lastChild)
      }

      for (i = 1; i <= pagination.last; i++) {
        var el = document.createElement('a')
        el.href = '#'
        el.innerHTML = i

        if (i === pagination.current) {
          el.className = 'on'
        } else {
          el.onclick = (function (i) {
            return function () {
              pagination.gotoPage(i)
            }
          })(i)
        }

        fragment.appendChild(el)
      }
      paginationEl.appendChild(fragment)
    }

    function displayMarker(place) {
      let marker = new kakao.maps.Marker({
        map: map,
        position: new kakao.maps.LatLng(place.y, place.x),
      })

      kakao.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>')
        infowindow.open(map, marker)
      })
    }
  }, [searchPlace])

  return (
    <div>
      <div
        id="myMap"
        style={{
          width: '500px',
          height: '500px',
        }}
      ></div>
      <div id="result-list">
        {Places.map((item, i) => (
          <div key={i} style={{ marginTop: '20px' }}>
            <span>{i + 1}</span>
            <div>
              <h5>{item.place_name}</h5>
              {item.road_address_name ? (
                <div>
                  <span>{item.road_address_name}</span>
                  <span>{item.address_name}</span>
                </div>
              ) : (
                <span>{item.address_name}</span>
              )}
              <span>{item.phone}</span>
            </div>
          </div>
        ))}
        <div id="pagination"></div>
      </div>
    </div>
  )
}

export default MapContainer

 

 

 

 

 

 

② 프로젝트명/src/index.css

css는 보기 좋게 정리 정도만 했다

 

.App {
  margin: 1rem;
}

.App .inputForm {
  margin: 2rem;
}

.App > div {
  display: flex;
  width: 100%;
}

.App #result-list {
  width: 60%;
  height: 500px;
  overflow: auto;
}

.App #pagination {
  margin-top: 3rem;
}

.App #pagination a {
  color: black;
  font-size: 20px;
  text-decoration: none;
  margin: 0 10px;
}

.App #pagination a.on {
  color: lightblue;
  font-weight: bold;
}

 

 

 

 

 

 

 

 

 

 

 

검색결과는 최대 45개까지만 제공한다고 한다

user로부터 키워드로 검색한 결과를 가져오기 위해 사용하려면

최대한 키워드를 정확하게 입력하도록 유도해야 할 거 같다

 

 

 

 

 

 

 

https://apis.map.kakao.com/web/sample/keywordList/

Kakao 지도 api 문서를 참고했고 js 혹은 js+html 코드만 있어서 react에서 사용하기 위해 조금씩 수정했다