@capgo/capacitor-native-map

iOS（Apple MapKit）	Android（Google Maps）

相同的 TypeScript code 可在两个平台上运行。这些录制来自 示例应用的演示导览，分别在真实的 iOS 模拟器和 Android 模拟器上运行。每一步的 code 都在 README 演示.

概览

@capgo/capacitor-native-map 为您提供一个 TypeScript API，用于在移动端实现原生地图性能，在 Web 端使用 Google Maps JS。您可以在 DOM 容器中创建嵌入式地图，或使用 背景模式 (toBack) 在透明 WebView 后面绘制地图，并使用 HTML 构建品牌化 UI。

平台支持

平台	支持	备注
iOS	是	MapKit
Android	是	Google Maps
Web 端	是	Google Maps JS

核心功能

• 生命周期: create, destroy, show, hide, updateLayout，与 Ionic 滚动视图同步调整大小。
• 后台模式: toBack 在透明 HTML 上合成并支持多点触控穿透。
• 摄像头: setCamera, fitBounds, getMapBounds，支持最小/最大缩放、航向角和倾斜角。
• 标记：添加、更新、移除、拖拽、聚合以及事件监听器。
• 覆盖物：多边形、折线、圆形和瓦片覆盖物（取决于平台）。
• 事件：地图、标记、形状、聚合以及相机静止/移动回调。

公开 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 和 Web 支持；iOS 会报错) UNAVAILABLE).
enableClustering / disableClustering	标记聚合，可设置最小聚合数量。
enableCurrentLocation	在获得权限时显示用户位置蓝点。
enableIndoorMaps / enableTrafficLayer	切换室内地图和路况 (取决于平台)。
setOnMapClickListener	监听地图表面的点击事件。
setOnMarkerClickListener	监听标记 (Marker) 点击事件。
setOnCameraIdleListener / setOnCameraMoveStartedListener	相机移动事件。
setOnClusterClickListener	聚合点点击事件。
setOnPolygonClickListener / setOnCircleClickListener / setOnPolylineClickListener	图形点击事件。
setOnMarkerDragStartListener / setOnMarkerDragListener / setOnMarkerDragEndListener	标记拖拽事件。

单一事实来源

此 API 参考文档由插件生成 src/definitions.ts ，详见 capacitor-native-map 仓库。

继续了解 @capgo/capacitor-native-map

如果你正在使用 @capgo/capacitor-native-map 在 Capacitor 应用中，将其与 使用 @capgo/capacitor-native-map 查看 SEO 教程及相关 Capgo 插件文档。