홈 지도를 Kakao Maps JS SDK 로 교체. ZoomControl(확대/축소)과 현재위치 버튼(@capacitor/geolocation → 파란 점 표시) 추가. naverMap.ts / NaverMap.vue 는 미사용으로 보존. 시뮬레이터에서 렌더·현재위치 확인. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
// 카카오 지도 JS SDK 동적 로더 (싱글턴)
|
||||
// JavaScript 키는 Kakao Developers > 내 애플리케이션 > 앱 키 > JavaScript 키.
|
||||
// .env 의 VITE_KAKAO_MAP_KEY 로 주입. 콘솔 > 플랫폼 > Web 에 서비스 도메인 등록 필요
|
||||
// (개발: http://localhost:9000 / 라이브리로드 IP, 배포: 실제 도메인·capacitor 스킴).
|
||||
let loadPromise: Promise<typeof kakao> | null = null
|
||||
|
||||
export function loadKakaoMaps(): Promise<typeof kakao> {
|
||||
if (typeof window !== 'undefined' && window.kakao?.maps) {
|
||||
return Promise.resolve(window.kakao)
|
||||
}
|
||||
if (loadPromise) {
|
||||
return loadPromise
|
||||
}
|
||||
|
||||
const appKey = import.meta.env.VITE_KAKAO_MAP_KEY
|
||||
|
||||
loadPromise = new Promise<typeof kakao>((resolve, reject) => {
|
||||
if (!appKey) {
|
||||
reject(new Error('VITE_KAKAO_MAP_KEY 가 설정되지 않았습니다.'))
|
||||
return
|
||||
}
|
||||
const script = document.createElement('script')
|
||||
// autoload=false → 스크립트 로드 후 kakao.maps.load 로 명시적으로 초기화한다.
|
||||
script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey}&autoload=false`
|
||||
script.async = true
|
||||
script.onload = () => {
|
||||
// 키/도메인이 유효하지 않으면 load 콜백이 호출되지 않을 수 있어 타임아웃으로 방어.
|
||||
const timer = setTimeout(
|
||||
() => reject(new Error('카카오 지도 초기화 실패 · 키/도메인 등록을 확인하세요.')),
|
||||
8000,
|
||||
)
|
||||
window.kakao.maps.load(() => {
|
||||
clearTimeout(timer)
|
||||
resolve(window.kakao)
|
||||
})
|
||||
}
|
||||
script.onerror = () => reject(new Error('카카오 지도 SDK 를 불러오지 못했습니다.'))
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
return loadPromise
|
||||
}
|
||||
Reference in New Issue
Block a user