[Today I Learned] kakao map api 사이드바 클릭시 해당마커 이동하는법

sidebar에서 랜더링된 데이터리스트중에 하나를 클릭하면 해당 마커로 확대되어야한다.

그러기 위해서는

const [area, setArea] = useRecoilState(CityArea);

recoil로 전역 state값 하나 만든 후

  const onClickHandler = (mapx: number, mapy: number, areacode: string) => {
    setArea({ mapx, mapy, level: 9, areacode });
    //모달생성
  };

이벤트핸들러 함수를 만들고 받아온 인자값을 전역에 넣어준다.

그 후에 지도페이지로 이동후 디펜던시에 전역상태값을 넣은 후에 kakaoapi에서 제공해주는 명령어를 사용한다.

  const [area, setArea] = useRecoilState(CityArea);

  useEffect(() => {
    kakao.maps.load(() => {
      const position = new kakao.maps.LatLng(area.mapy, area.mapx);

      let el = document.getElementById('map');

      const mapOptions = {
        center: position, // 지도의 중심좌표
        level: area.level, // 지도의 확대 레벨
      };

      const map = new kakao.maps.Map(el, mapOptions);

      // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
      let zoomControl = new kakao.maps.ZoomControl();
      map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

      // 마커 이미지의 이미지 주소
      let imageSrc = require('@/assets/marker.png').default;
      // 마커 이미지의 이미지 크기
      let imageSize = new kakao.maps.Size(60, 60);

      for (let i = 0; i < cityInfo.length; i++) {
        // 마커 이미지를 생성합니다
        let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

        const content = `
        <div class="customoverlay" style="background-color :#fff; width: auto; height: auto; padding: 2px; border-radius: 5px; border: 1px solid #1753a5;">
          <div style="color: #1753a5; font-weight: 700; font-size: 13px;">${cityInfo[i].korarea}</div>
        </div>`;

        // const content = `
        // <Style.Wrap class="customoverlay">
        //   <span>
        //    ${cityInfo[i].korarea}
        //   </span>
        // </Style.Wrap>`;

        // 마커를 생성합니다
        let marker = new kakao.maps.Marker({
          map, // 마커를 표시할 지도
          position: new kakao.maps.LatLng(cityInfo[i].mapy, cityInfo[i].mapx), // 마커를 표시할 위치
          title: cityInfo[i].korarea, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
          image: markerImage, // 마커 이미지
        });

        // 커스텀 오버레이 생성
        new kakao.maps.CustomOverlay({
          map,
          position: new kakao.maps.LatLng(cityInfo[i].mapy, cityInfo[i].mapx),
          content,
          title: cityInfo[i].korarea,
          image: markerImage,
        });

        marker.setMap(map);

        // let isClicked = true;
        kakao.maps.event.addListener(marker, 'click', () => {
          // console.log(cityInfo[i].korarea);
          //모달 생성
        });
      }
    });
  }, [area]);