안녕하세요 저는 토이프로젝트로 리액트를 이용해 맵 API를 사용하고 있습니다.
다름이 아니라 저는 처음에 검색시 마커를 보여주고 사용자가 맵을 이동시키면
그 이벤트의 발동에 따라 중심위치를 기준으로 재검색 하는 기능을 구현하고 싶습니다.
그런데 처음의 시작좌표로는 마커가 표시되나
맵 이동시엔 마커가 표시 되지 않습니다.
저는 이동시 재검색 함수가 실행되면서 새로 검색되어 마커가 추가될 거라고 생각했는데
어찌저찌 해봐도 안되네요 ㅠㅠ 도움요청합니다.
const displayMarker = (map: any, infowindow: any, place: any): void => {
const marker = new kakao.maps.Marker({
map,
position: new kakao.maps.LatLng(place.y, place.x),
})
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, "click", function () {
// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
const myMarker = MyMarker(place)
const renderedMarger = ReactDOMServer.renderToString(myMarker)
infowindow.setContent(renderedMarger)
infowindow.open(map, marker)
})
}
useEffect(() => {
const infowindow = new kakao.maps.InfoWindow({ zIndex: 1, width: "100px" })
const container = mapContainer.current
const options = {
center: new kakao.maps.LatLng(myLatLng[0], myLatLng[1]),
level: 3,
}
const map = new kakao.maps.Map(container, options)
const imageSrc =
"https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png"
const imageSize = new kakao.maps.Size(64, 69)
const imageOption = { offset: new kakao.maps.Point(27, 69) }
const placesSearchCB = (data: any, status: any): any => {
// pagination.gotoPage(selectedPage)
console.log(data)
// if (data !== "ERROR" && pagination.current === selectedPage) {
// setSearchedData(data)
// }
// setPageCount(pagination.last)
console.log("dasdas")
if (status === kakao.maps.services.Status.OK) {
console.log("sssss")
setSearchedData(data)
const bounds = new kakao.maps.LatLngBounds()
for (let i = 0; i < data.length; i += 1) {
displayMarker(map, infowindow, data[i])
}
// map.panTo(new kakao.maps.LatLng(data[0].y, data[0].x))
}
}
// 맵에 이동시 좌표이벤트 달기
kakao.maps.event.addListener(map, "idle", async (): Promise<void> => {
const level = await map.getLevel()
const latlng = map.getCenter()
const message = `지도 레벨은 ${level} 중심좌표는 위도 ${latlng.getLat()} 이고
경도 ${latlng.getLng()} 입니다.`
setMyLatLng([latlng.getLat(), latlng.getLng()])
setMyLevel(level)
const pageOptions2 = {
size: level, // 나중에 설정한 위치 기준으로 할 것
// location: new kakao.maps.LatLng(myLatLng[0], myLatLng[1]),
level: myLevel,
SORT_BY: "DISTANCE",
useMapCenter: true,
useMapBounds: true,
}
const nps = new kakao.maps.services.Places()
console.log(message)
await nps.keywordSearch(searchKeyword, placesSearchCB, pageOptions2)
})
const ps = new kakao.maps.services.Places()
const pageOptions = {
size: 5, // 나중에 설정한 위치 기준으로 할 것
location: new kakao.maps.LatLng(myLatLng[0], myLatLng[1]),
SORT_BY: "DISTANCE",
}
ps.keywordSearch(searchKeyword, placesSearchCB, pageOptions)
setIsSearch(false)
}, [selectedPage, searchKeyword])
