- HomePage 지도 컴포넌트 KakaoMap → NaverMap - NaverMap 에 확대/축소 컨트롤 + 지도 클릭 시 최근접 스팟 선택 이식 (카카오에 있던 기능 동등하게) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -43,8 +43,18 @@ onMounted(async () => {
|
||||
map = new nv.maps.Map(mapEl.value, {
|
||||
center: new nv.maps.LatLng(center.lat, center.lng),
|
||||
zoom: 14,
|
||||
// 확대/축소 +/- 컨트롤 (핀치 줌도 함께 동작)
|
||||
zoomControl: true,
|
||||
zoomControlOptions: { position: nv.maps.Position.RIGHT_CENTER },
|
||||
})
|
||||
infoWindow = new nv.maps.InfoWindow({ content: '', borderWidth: 0, disableAnchor: true })
|
||||
// 지도 아무 곳이나 탭하면 가장 가까운 스팟 선택 (마커가 겹쳐도 선택 가능)
|
||||
nv.maps.Event.addListener(map, 'click', (e: naver.maps.PointerEvent) => {
|
||||
if (!e?.coord) return
|
||||
const coord = e.coord as naver.maps.LatLng
|
||||
const spot = nearestSpot(coord.lat(), coord.lng())
|
||||
if (spot) emit('select', spot.id)
|
||||
})
|
||||
renderMarkers(nv)
|
||||
} catch (e) {
|
||||
errorMsg.value = `${(e as Error).message} 지도 키(VITE_NAVER_MAP_CLIENT_ID)를 설정하세요.`
|
||||
@@ -84,6 +94,23 @@ function firstCenter() {
|
||||
return withCoord ? { lat: withCoord.latitude!, lng: withCoord.longitude! } : DEFAULT_CENTER
|
||||
}
|
||||
|
||||
/** 클릭 좌표에서 가장 가까운 스팟(위경도 제곱거리 최소). */
|
||||
function nearestSpot(lat: number, lng: number): Spot | null {
|
||||
let best: Spot | null = null
|
||||
let bestDist = Infinity
|
||||
for (const s of props.spots) {
|
||||
if (s.latitude == null || s.longitude == null) continue
|
||||
const dLat = s.latitude - lat
|
||||
const dLng = s.longitude - lng
|
||||
const dist = dLat * dLat + dLng * dLng
|
||||
if (dist < bestDist) {
|
||||
bestDist = dist
|
||||
best = s
|
||||
}
|
||||
}
|
||||
return best
|
||||
}
|
||||
|
||||
function renderMarkers(nv: typeof naver) {
|
||||
markers.forEach((m) => m.setMap(null))
|
||||
markers.clear()
|
||||
|
||||
Reference in New Issue
Block a user