Jaymz

export default function orderHeatMap() { const { bounds, map } = useContext(mapFilterContext); const { heatMap, date, datePickerType, salesType, orderHeatMapArea } = useContext(filterContext); const { data, refetch } = useQuery<Item[], Object, Item[], [string, string, any, string, string, number, number, number, number, number]>({ queryKey: ["sales", "heatMap", date, salesType, datePickerType, bounds?._sw.x ?? 0, bounds?._sw.y ?? 0, bounds?._ne.x ?? 0, bounds?._ne.y ?? 0, map?.getZoom() ?? 0], queryFn: mapBounding, staleTime: 60 * 1000, gcTime: 300 * 1000, enabled: !!bounds && !!map?.getZoom() && !!date && !!orderHeatMapArea }) as any; useEffect(() => { if(orderHeatMapArea) { refetch(); } }, [ orderHeatMapArea, refetch ]); useEffect(() => { if(map) { if(heatMap.current) { heatMap.current.setMap(null); heatMap.current = null; } if(orderHeatMapArea && data) { const heatMapData = data.order.map((item: any) => new naver.maps.LatLng(item.lat, item.lon) ); const orderHeatmap = new naver.maps.visualization.HeatMap({ map: map, data: heatMapData, opacity: 0.4, radius: 50, }); console.log("dd"); heatMap.current = orderHeatmap; } } }, [ data, map ]); return null; } 안녕하세요. orderHeatMapArea 여부에따라 해당 컴퍼넌트를 불러서 열지도를 보여주는데 처음 버튼을 눌러 orderHeatMapArea true가 되서 열지도를 만들고 다시 버튼을 눌러 false되서 열지도가 지워지고 다시 버튼을 눌러 true로 바꾸면 로컬에서는 열지도가 나오는데 서버에 올리면 나오지가 않습니다. 콘솔에도 찍히는데 왜 안나오는지.. 지도를 움직이면 나와서 true일때 refetch해서 데이터를 다시 가져오게 했는데도 안나옵니다. 어떻게 해야할까요?

지도 이동시 만들지 않고 메뉴를 클릭할때 생성하고 나갈때 setMap(null) 합니다. 이상한게 로컬에서는 다시 보여지는데 서버에 올려서 확인하면 정상적으로 작동을 합니다. 로컬이 느려서 그런건지 왜그런건지 모르겠네요.

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로 하면서 클러스트를 해보니 삭제는 되는데 지도를 움직이거나 줌이 변하면 클러스트마커가 다시 나옵니다. 어떻게 해야할지 몰라 이렇게 문의 드립니다. 감사합니다.