카카오맵 리액트용 SDK에서 키워드로 장소검색하기와 클릭한 위치에 마커 표시하기를 같이 사용하는 코드를 짜봤다. 표시한 마커에 정보가 나오게 하려면 MapMarker에 추가해주면 될 것 같다.
function(){
const [info, setInfo] = useState()
const [markers, setMarkers] = useState([])
const [map, setMap] = useState()
const [aaa, setAaa] = useState()
useEffect(() => {
if (!map) return
const ps = new kakao.maps.services.Places()
ps.keywordSearch("이태원 맛집", (data, status, _pagination) => {
if (status === kakao.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
const bounds = new kakao.maps.LatLngBounds()
let markers = []
for (var i = 0; i < data.length; i++) {
// @ts-ignore
markers.push({
position: {
lat: data[i].y,
lng: data[i].x,
},
content: data[i].place_name,
})
// @ts-ignore
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
}
setMarkers(markers)
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds)
}
})
}, [map])
return (
<Map // 로드뷰를 표시할 Container
center={{
lat: 37.566826,
lng: 126.9786567,
}}
style={{
width: "100%",
height: "350px",
}}
level={3}
onCreate={setMap}
onClick={(_t, mouseEvent) => setAaa({
lat: mouseEvent.latLng.getLat(),
lng: mouseEvent.latLng.getLng(),
})}
>
{markers.map((marker) => (
<MapMarker
key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
position={marker.position}
onClick={() => setInfo(marker)}
>
{info &&info.content === marker.content && (
<div style={{color:"#000"}}>{marker.content}</div>
)}
</MapMarker>
))}
{aaa && <MapMarker position={aaa} />}
</Map>
)
}
카카오맵 웹용 라이브러리로 프로젝트의 기능을 구현했다가 리액트용 SDK가 더 간편할 것 같아 적용해 봤지만 마커의 인포윈도우에 띄울 정보를 가져오려면 어떤 속성이 써야 하는지, 속성이 있긴 한건지 시간을 써서 찾아봐야했지만 그리하지 않았다. 왜냐하면 속성을 추가하고 상태로 만들면 어차피 웹용 라이브러리와 코드량이 비슷할 것 같기 때문이다. 그리하여 그냥 그대로 가기로 하고 테스트코드나 더 구현해 봐야 할 것 같다.