현재 키워드로 장소를 검색하고 마커를 띄운 다음 리스트를 만드는 것 까지 구현에 성공했는데요, 여기서 추가로 선택한 장소들로 마커를 띄우는걸 구현하고 싶은데 어떻게 해야 할까요 ??
아래는 현재까지 작성된 코드입니다.
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
id=“myMap”
style={{
width: ‘500px’,
height: ‘500px’,
}}
>
{Places.map((item, i) => (
<div key={i} style={{ marginTop: ‘20px’ }}>
{i + 1}
{item.place_name}
{item.road_address_name ? (
{item.road_address_name}
{item.address_name}
) : (
{item.address_name}
)}
{item.phone}
))}
)
}
export default MapContainer