기존 마커 클러스터를 제거할 수 있나요?

[마커클러스터링]

안녕하세요. 현재 리액트로 마커 클러스터링을 구현하고 있는 중에 문제가 발생해서 글을 올리게 되었습니다. 문서를 아무리 찾아봐도 보이지 않더라고요.

총 세 개의 버튼이 존재하는데 누른 버튼에 따라 총 마커의 개수인 markerArray값이 달라집니다.  

달라지는 markerArray값에 따라 마커 및 클러스터링이 표시되게 구현하였지만 UI 상에서는 지워지지 않고, 누적되어 남아 있습니다.

이러한 문제로 지도에 표시한 마커 및 클러스터링을 지우는 함수가 있는지 궁금합니다.

마커는 클린업 함수에서 setMap(null)로 하면 지워지지만 클러스터링이 남아 있어서인지 지도를 움직이면(확대/축소 등) 다시 나타나는 문제가 발생합니다.

[zakklee]

On 2024. 2. 26. at 오전 12시 18분, 마커클러스터링 said:

안녕하세요. 현재 리액트로 마커 클러스터링을 구현하고 있는 중에 문제가 발생해서 글을 올리게 되었습니다. 문서를 아무리 찾아봐도 보이지 않더라고요.

총 세 개의 버튼이 존재하는데 누른 버튼에 따라 총 마커의 개수인 markerArray값이 달라집니다.  

달라지는 markerArray값에 따라 마커 및 클러스터링이 표시되게 구현하였지만 UI 상에서는 지워지지 않고, 누적되어 남아 있습니다.

이러한 문제로 지도에 표시한 마커 및 클러스터링을 지우는 함수가 있는지 궁금합니다.

마커는 클린업 함수에서 setMap(null)로 하면 지워지지만 클러스터링이 남아 있어서인지 지도를 움직이면(확대/축소 등) 다시 나타나는 문제가 발생합니다.

안녕하세요, 설명해주신 부분만으로는 알 수 있는 내용이 너무 적습니다.
재현 가능한 코드나 구현하신 코드를 올려주시면 다른 분들이 도움을 주실 수 있지 않을까요?
react state update가 안되는 것인지 구현하신 클러스터링 로직에 놓치신 부분이 있는 것인지 가늠이 안되네요.

[마커클러스터링]

넵! 추가하였습니다. 하기는 리액트로 구현한 클러스터 부분입니다.
참고한 대부분의 블로그에서 클러스터 부분을 js 파일을 이용해 직접 import해서 진행한 형식이라 저도 동일하게 진행하였습니다.
js 파일로 인해 원하는 기능이 나타나지 않는것으로 현재 짐작하고 있기는 합니다ㅠ 수정해보려고 했는데 조금 막막하더라고요.

추가적으로 filterShops의 경우 쿼리로 받은 데이터 값입니다. naver.maps.Marker 타입이 없기 때문에 markerArray로 새롭게 반환하는 과정을 거치게 되었습니다. 

// 클러스터 함수

import { useEffect, useState } from 'react';

import { ClusterHtml } from 'pages/Home/Map/components/MarkerHtml/index';

import MarkerClustering from 'utils/js/MarkerClustering';

 

interface ClusterProps {

  markerArray: (naver.maps.Marker | undefined)[];

  map: naver.maps.Map | null;

}

 

const HTMLMARKER = {

  content: ClusterHtml(),

  size: new naver.maps.Size(40, 40),

  anchor: new naver.maps.Point(20, 20),

};

 

function useCluster({ markerArray, map }: ClusterProps) {

  const [cluster, setCluster] = useState<MarkerClustering | null>(null);

 

  useEffect(() => {

    if (map && markerArray.length > 0) {

      const markerClustering = new MarkerClustering({

        minClusterSize: 2,

        maxZoom: 20,

        map,

        markers: markerArray,

        disableClickZoom: false,

        gridSize: 120,

        icons: [HTMLMARKER],

        indexGenerator: [120],

        stylingFunction: (clusterMarker: any, count: number) => {

          if (clusterMarker) {

            const firstChild = clusterMarker.getElement().querySelector('div:first-child');

            if (firstChild) {

              firstChild.innerHTML = count;

            }

          }

        },

      });

 

      setCluster(markerClustering);

    }

  }, [map, markerArray]);

 

  return { cluster };

}

 

export default useCluster;
 

// 지도 및 마커 클러스터를 표시하는 컴포넌트

import { useLocation } from 'store/location';

import useMarker from 'utils/hooks/useMarker';

import useNaverMap from 'utils/hooks/useNaverMap';

 

import styles from './Map.module.scss';

 

export default function Map(): JSX.Element {

  const { location } = useLocation();

  const map = useNaverMap(location?.lat, location?.lng); // 지도 표시

 

  const { markerArray } = useMarker({ map, filterShops }); // 마커 표시

  useCluster({ markerArray, map }); // 마커 클러스터 부분

 

  return (

    <>

      <div id="map" className={styles.map}>

        {!location && <div className={styles.loading}><LoadingIcon /></div>}

      </div>

    </>

  );

}

Edited February 27 by 마커클러스터링

[zakklee]

안녕하세요.
올려주신 코드를 보니 markerClustering 이 markerArray가 업데이트될 때 마다 생성되기만 하고 지워지지는 않네요.
MarkerClustering 구현을 보니 OverlayView를 상속 받고 있습니다.
그래서 useEffect return 정리 함수 부분에서 markerClustring.setMap(null)을 추가해주시거나,
MarkerClustering를 하나만 생성하고 userEffect 부분에서 setMarker를 사용하여 업데이트 해주는 방식으로 하면 동작하지 않을까 생각됩니다.

[마커클러스터링]

대박..해결 완료했습니다. setMap(null)로 마커를 지우지 못 해서 생긴 문제였네요. 정말 감사합니다!!