|
|
|
@@ -28,6 +28,7 @@ type NaverMapInstance = {
|
|
|
|
getZoom: () => number;
|
|
|
|
getZoom: () => number;
|
|
|
|
getBounds: () => { getNE: () => LatLng; getSW: () => LatLng };
|
|
|
|
getBounds: () => { getNE: () => LatLng; getSW: () => LatLng };
|
|
|
|
panTo: (latlng: unknown, opts?: Record<string, unknown>) => void;
|
|
|
|
panTo: (latlng: unknown, opts?: Record<string, unknown>) => void;
|
|
|
|
|
|
|
|
morph: (latlng: unknown, zoom?: number, transitionOptions?: Record<string, unknown>) => void;
|
|
|
|
refresh: (noEffect?: boolean) => void;
|
|
|
|
refresh: (noEffect?: boolean) => void;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
type NaverMarker = {
|
|
|
|
type NaverMarker = {
|
|
|
|
@@ -231,21 +232,21 @@ export default function NaverMapView({
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [ready, flyTo, selected, onBoundsChanged]);
|
|
|
|
}, [ready, flyTo, selected, onBoundsChanged]);
|
|
|
|
|
|
|
|
|
|
|
|
// flyTo 변경 반영
|
|
|
|
// flyTo 변경 반영 — morph로 panTo+setZoom 충돌 회피
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
const m = mapRef.current;
|
|
|
|
const m = mapRef.current;
|
|
|
|
if (!m || !flyTo || !window.naver?.maps) return;
|
|
|
|
if (!m || !flyTo || !window.naver?.maps) return;
|
|
|
|
m.panTo(new window.naver.maps.LatLng(flyTo.lat, flyTo.lng));
|
|
|
|
const latlng = new window.naver.maps.LatLng(flyTo.lat, flyTo.lng);
|
|
|
|
if (flyTo.zoom) m.setZoom(flyTo.zoom, true);
|
|
|
|
if (flyTo.zoom) m.morph(latlng, flyTo.zoom);
|
|
|
|
|
|
|
|
else m.panTo(latlng);
|
|
|
|
}, [flyTo]);
|
|
|
|
}, [flyTo]);
|
|
|
|
|
|
|
|
|
|
|
|
// selected 변경 시 자동 panTo + zoom (GoogleMapView와 동일 동작)
|
|
|
|
// selected 변경 시 자동 중앙 + zoom
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
const m = mapRef.current;
|
|
|
|
const m = mapRef.current;
|
|
|
|
if (!m || !selected || !window.naver?.maps) return;
|
|
|
|
if (!m || !selected || !window.naver?.maps) return;
|
|
|
|
if (selected.latitude == null || selected.longitude == null) return;
|
|
|
|
if (selected.latitude == null || selected.longitude == null) return;
|
|
|
|
m.panTo(new window.naver.maps.LatLng(selected.latitude, selected.longitude));
|
|
|
|
m.morph(new window.naver.maps.LatLng(selected.latitude, selected.longitude), 16);
|
|
|
|
m.setZoom(16, true);
|
|
|
|
|
|
|
|
}, [selected]);
|
|
|
|
}, [selected]);
|
|
|
|
|
|
|
|
|
|
|
|
// 클러스터 계산 (bounds/zoom 변경 시)
|
|
|
|
// 클러스터 계산 (bounds/zoom 변경 시)
|
|
|
|
@@ -280,8 +281,7 @@ export default function NaverMapView({
|
|
|
|
});
|
|
|
|
});
|
|
|
|
naver.Event.addListener(marker, "click", () => {
|
|
|
|
naver.Event.addListener(marker, "click", () => {
|
|
|
|
const z = Math.min(getExpansionZoom(cluster_id), 18);
|
|
|
|
const z = Math.min(getExpansionZoom(cluster_id), 18);
|
|
|
|
m.panTo(new naver.LatLng(lat, lng));
|
|
|
|
m.morph(new naver.LatLng(lat, lng), z);
|
|
|
|
m.setZoom(z, true);
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
markersRef.current.push(marker);
|
|
|
|
markersRef.current.push(marker);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
|