본문 바로가기

React&React-Native/React

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

반응형

 

 

 

 

 

① APP KEY 발급 받기

 

 

카카오에서 상세한 발급 과정을 알려준다

 

 

 

이렇게 앱키를 발급 받았으면 여기서 JavaScript 키를 사용할 것이다

 

 

 

 

 

② 프로젝트/public/index.html

<head></head> 사이 <title></title> 아래 script를 추가한다

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[JavaScript 키]&libraries=services"></script>

 

 

 

 

 

③ 프로젝트/src/components/views/Landing/LandingPage.js

 

import React, { useState } from 'react'
import MapContainer from './Sections/MapContainer'

function LandingPage() {
  const [InputText, setInputText] = useState('')
  const [Place, setPlace] = useState('')

  const onChange = (e) => {
    setInputText(e.target.value)
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    setPlace(InputText)
    setInputText('')
  }

  return (
    <>
      <form className="inputForm" onSubmit={handleSubmit}>
        <input placeholder="검색어를 입력하세요" onChange={onChange} value={InputText} />
        <button type="submit">검색</button>
      </form>
      <MapContainer searchPlace={Place} />
    </>
  )
}

export default LandingPage

 

 

 

 

 

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

 

import React, { useEffect } from 'react'

const { kakao } = window

const MapContainer = ({ searchPlace }) => {
  useEffect(() => {
    var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 })
    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)
      }
    }

    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
        id="myMap"
        style={{
          width: '500px',
          height: '500px',
        }}>
     </div>
  )
}

export default MapContainer

 

 

 

 

 

 

 

이렇게 키워드로 검색어를 입력하면 해당 장소 위로 마커가 뜨는 것을 확인할 수 있다

아래 카카오 지도 API 샘플을 참고했다

 

 

 

 

 

 

 

 

 

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

 

반응형