지도 API 관련 질문드립니다

지도/로컬 API
#1

안녕하세요. 현재 React, TypeScript로 지도 API를 이용하고 있습니다.

지도에서 줌인, 줌아웃 시 이전 장소가 잔상으로 나오는 문제가 발생하여, 다음의 글을 토대로 카카오맵 중복 렌더링을 해결하려 했습니다.

그러나 new kakao.maps.Map(container, options)으로 생성하는 지도 인스턴스의 타입을 정의할 수 없어, setBounds 매서드를 사용할 때 타입 에러가 발생합니다. 이에 관해 혹시 해결 방법이 있을 지 궁금합니다.

다음은 제가 문제를 겪고 있는 코드입니다. 검색 중에 발견한 샘플 코드를 참고하여 작성했습니다.

declare global {
  interface Window {
    kakao: any;
  }
}

type MapPropsTypes = {
  markersLocations: MapPropsType[];
  setClickedDestination: React.Dispatch<
    React.SetStateAction<MapPropsType | null>
  >;
};

const DEFAULT_LOCATION = {
  LATITUDE: 33.48907969999994,
  LONGITUDE: 126.49932809999973
};

const { kakao } = window;

function Map({ markersLocations, setClickedDestination }: MapPropsTypes) {
  const [renderedMap, setRenderedMap] = useState(null);
  const cachingMarkers = useMemo(() => {
    return markersLocations;
  }, [markersLocations]);

  useEffect(() => {
    const container = document.getElementById('map');

    const options = {
      center: new kakao.maps.LatLng(
        DEFAULT_LOCATION.LATITUDE,
        DEFAULT_LOCATION.LONGITUDE
      ),
      level: 3
    };
    const map = new kakao.maps.Map(container, options);
    setRenderedMap(() => map);
  }, []);

  useEffect(() => {
    const bounds = new kakao.maps.LatLngBounds();

    cachingMarkers?.forEach((marker) => {
      const position = new kakao.maps.LatLng(
        Number(marker?.mapy),
        Number(marker?.mapx)
      );
      const newMarker = new kakao.maps.Marker({
        title: marker.title,
        position,
        map: renderedMap
      });
      newMarker.setMap(renderedMap);
      bounds.extend(position);
      renderedMap.setBounds(bounds, 36, 32, 32, 650); //renderedMap이 null일 가능성으로 type error

      kakao.maps.event.addListener(newMarker, 'click', function () {
        setClickedDestination(marker);
      });
    });
  }, [cachingMarkers, renderedMap]);

  return (
    <>
      <div className={styles.map} id='map'></div>
    </>
  );
}

감사합니다.

#2

renderedMap을 선언할 때 아래와 같이 선언해 주시고,

const [renderedMap, setRenderedMap] = useState<any>(null);

마커를 생성하는 useEffect 훅에서 아래와 같은 조건문을 추가해 주세요.

if(renderedMap === null) {
    return;
}

그리고 마커를 생성하는 훅에서 renderedMap이 의존성으로 포함되어 있기 때문에 코드를 실행하면 지도가 두 번 생성됩니다.
지도는 한 번만 생성되게 해 주세요.

1개의 좋아요
#3

답변 정말 감사드립니다.

1개의 좋아요