| iOS (Apple MapKit) | Android (Google Maps) |
|---|---|
 |  |
동일한 TypeScript code가 두 플랫폼 모두에서 실행됩니다. 이 녹화들은 예제 앱의 데모 투어에서 가져온 것으로, 실제 iOS 시뮬레이터와 Android 에뮬레이터에서 실행되었습니다. 각 단계의 code는 README 데모.
개요
“개요” 섹션@capgo/capacitor-native-map는 모바일 네이티브 맵 성능과 웹의 Google Maps JS를 위한 단일 TypeScript API를 제공합니다. DOM 컨테이너에 임베디드 맵을 생성하거나 백그라운드 모드 (toBack)를 사용해 투명한 WebView 뒤에 지도를 렌더링하고 HTML로 브랜드 UI를 구축하세요.
플랫폼 지원
“플랫폼 지원” 섹션| 플랫폼 | 지원 | 참고 사항 |
|---|---|---|
| iOS | 지원 | MapKit |
| Android | 지원 | Google Maps |
| 웹 | 지원 | Google Maps JS |
핵심 기능
“핵심 기능” 섹션- 라이프사이클:
create,destroy,show,hide,updateLayout, Ionic 스크롤 뷰와 리사이즈 동기화. - 백그라운드 모드:
toBack투명 HTML에서 멀티 터치 패스스루를 통한 컴포지팅. - 카메라:
setCamera,fitBounds,getMapBounds, 최소/최대 줌, 방위, 기울기. - 마커: 추가, 업데이트, 제거, 드래그, 클러스터링 및 이벤트 리스너.
- 오버레이: 폴리곤, 폴리라인, 원, 타일 오버레이(플랫폼에 따라 다름).
- 이벤트: 맵, 마커, 셰이프, 클러스터, 카메라 idle/move 콜백.
공개 API
“Public API” 섹션| 메서드 | 설명 |
|---|---|
create | 맵 생성(CreateMapArgs: id, config, 선택 사항 element, apiKey, toBack, forceCreate). |
destroy | 맵 인스턴스를 파괴하고 네이티브 리소스를 해제합니다. |
show / hide | 네이티브 맵을 파괴하지 않고 표시하거나 숨깁니다. |
updateLayout | CSS 픽셀 단위로 위치와 크기를 업데이트합니다(특히 toBack 모드에서). |
enableTouch / disableTouch | 맵의 제스처 수신 여부를 전환합니다. |
setCamera | 맵 카메라를 이동하거나 애니메이션 처리합니다. |
getMapType / setMapType | 맵 타입을 읽거나 설정합니다(Normal, Hybrid, Satellite, Terrain, None). |
fitBounds | 선택적 패딩을 적용해 뷰포트를 위도/경도 범위에 맞춥니다. |
getMapBounds | 현재 표시 영역의 경계를 읽습니다. |
setPadding | 표시 중인 맵 영역에 패딩을 설정합니다. |
addMarker / addMarkers | 하나 이상의 마커를 추가하고 마커 ID를 반환합니다. |
removeMarker / removeMarkers | ID로 마커를 제거합니다. |
addPolygons / removePolygons | 폴리곤 오버레이 추가 또는 제거 |
addPolylines / removePolylines | 폴리라인 추가 또는 제거 |
addCircles / removeCircles | 원 추가 또는 제거 |
addTileOverlay / removeTileOverlay | 커스텀 타일 레이어 (Android 및 웹; iOS는 거부하며 UNAVAILABLE). |
enableClustering / disableClustering | 최소 클러스터 크기를 선택적으로 지정하는 마커 클러스터링 |
enableCurrentLocation | 권한이 허용되면 사용자 위치 점 표시 |
enableIndoorMaps / enableTrafficLayer | 실내 지도 및 교통 정보 전환 (플랫폼에 따라 다름) |
setOnMapClickListener | 지도 표면 탭 이벤트 수신 |
setOnMarkerClickListener | 마커 탭 이벤트 수신 |
setOnCameraIdleListener / setOnCameraMoveStartedListener | 카메라 이동 이벤트 |
setOnClusterClickListener | 클러스터 탭 이벤트 |
setOnPolygonClickListener / setOnCircleClickListener / setOnPolylineClickListener | 형상 탭 이벤트 |
setOnMarkerDragStartListener / setOnMarkerDragListener / setOnMarkerDragEndListener | 마커 드래그 이벤트. |
Source of Truth
“Source Of Truth” 섹션이 API 레퍼런스는 플러그인 src/definitions.ts 플러그인의 capacitor-native-map 저장소에서 생성됩니다.
@capgo/capacitor-native-map에서 계속하기
“@capgo/capacitor-native-map에서 계속하기” 섹션사용 중이라면 @capgo/capacitor-native-map Capacitor 앱에서 다음으로 연결하세요 @capgo/capacitor-native-map 사용하기 SEO 튜토리얼 및 관련 Capgo 플러그인 문서를 확인하세요.
