마커 클러스터 삭제가 안되요.

[Jaymz]

import("@/utils/markerClustering").then(({ markerClustering }) => {
    const deliveryMarker1 = {
    content: `<div class="${style.delivery}" aria-label="depth1"><span class="${style.count}">1</span></div>`,
    size: new naver.maps.Size(48, 48),
    anchor: new naver.maps.Point(24, 24),
    },
    deliveryMarker2 = {
    content: `<div class="${style.delivery}" aria-label="depth2"><span class="${style.count}">1</span></div>`,
    size: new naver.maps.Size(64, 64),
    anchor: new naver.maps.Point(32, 32),
    },
    deliveryMarker3 = {
    content: `<div class="${style.delivery}" aria-label="depth3"><span class="${style.count}">1</span></div>`,
    size: new naver.maps.Size(80, 80),
    anchor: new naver.maps.Point(40, 40),
    },
    deliveryMarker4 = {
    content: `<div class="${style.delivery}" aria-label="depth4"><span class="${style.count}">1</span></div>`,
    size: new naver.maps.Size(96, 96),
    anchor: new naver.maps.Point(48, 48),
    };
    
    const markerClusterings = new markerClustering({
    minClusterSize: 2,
    maxZoom: 22,
    map: SYmap,
    markers: deliveryMarkers.current,
    disableClickZoom: true,
    gridSize: 100,
    icons: [deliveryMarker1, deliveryMarker2, deliveryMarker3, deliveryMarker4],
    indexGenerator: [100, 1000, 10000, 100000],
    stylingFunction: function(clusterMarker: any, count: number) {
        clusterMarker.getElement().querySelector("span").textContent = SYcount;
        deliveryClusterMarkers.current.push(clusterMarker);
    },
    });
    
});
안녕하세요.

예전 제이쿼리를 쓸때는 저런식으로 클러스트마커를 배열에 넣고 setMap(null)로 지웠는데 next.js로 하면서 클러스트를 해보니

삭제는 되는데 지도를 움직이거나 줌이 변하면 클러스트마커가 다시 나옵니다.

어떻게 해야할지 몰라 이렇게 문의 드립니다.

감사합니다.

 

 

[kkokko.jeong]

알려주신 내용을 보면 지도 이동시 MarkerClustring 객체를 새로 생성하는 것처럼 보입니다.

서비스 코드 재확인 부탁드립니다.

 

제이쿼리 사용 시 정상동작하는 걸 보면 next.js 사용하면서 발생한 문제인 것 같네요. 특정 프레임워크에 대한 코드 리뷰는 지원하지 않는 점 양해 부탁드립니다.

[Jaymz]

지도 이동시 만들지 않고 메뉴를 클릭할때 생성하고 나갈때 setMap(null)  합니다.

이상한게 로컬에서는 다시 보여지는데 서버에 올려서 확인하면 정상적으로 작동을 합니다.

로컬이 느려서 그런건지 왜그런건지 모르겠네요.