반응형
① 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
반응형
'React&React-Native > React' 카테고리의 다른 글
| [#. React] React에서 swiper 사용하기, 배너 슬라이드 사용하기 (1) | 2021.04.09 |
|---|---|
| [#. React] Kakao 카카오 지도 API를 이용해서 키워드로 장소 검색하기, 검색한 장소 마커 띄우기, 검색 결과 리스트 가져오기 2 (0) | 2021.04.07 |
| [#. React] React에서 checkbox select all 체크박스 전체 선택, 전체 선택 해제 하기 (0) | 2021.04.01 |
| [#. React] CRA(create-react-app)에 ESLint, Prettier 적용, 설정하기 (0) | 2021.03.23 |
| [#. React] Webpack이란? CRA로 시작한 React 프로젝트에 숨겨져 있던 Webpack 설정 파일 확인하기 (0) | 2021.03.23 |
