카카오 맵 API 중심 좌표이동시 키워드로 재검색 기능 구현하기

안녕하세요 저는 토이프로젝트로 리액트를 이용해 맵 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])

image

해결했습니당 ^-^

좋아요 2