跳到主要内容
版本:v6

@capacitor/google-maps

Capacitor 上的 Google 地图。

安装​

npm install @capacitor/google-maps
npx cap sync

API 密钥​

要在任何平台上使用 Google Maps SDK,需要与已启用计费的账户关联的 API 密钥。这些可以从 Google Cloud Console 获取。Android、iOS 和 Javascript 三个平台都需要。有关获取这些 API 密钥的更多信息,可以在每个平台的 Google Maps 文档 中找到。

iOS​

Google Maps SDK 支持通过 enableCurrentLocation(bool) 显示用户当前位置。要使用此功能,Apple 要求在 Info.plist 中指定隐私描述:

  • NSLocationWhenInUseUsageDescription(Privacy - Location When In Use Usage Description)

阅读 iOS 指南 中关于 配置 Info.plist 的内容,了解更多关于在 Xcode 中设置 iOS 权限的信息。

主 Google Maps SDK 现在支持在 Apple Silicon Mac 上的模拟器上运行,但请确保您已安装最新版本的 Google-Maps-iOS-Utils。

如果您之前添加了获取未发布版本的工作区,现在可以通过从 ios/App/Podfile 中删除以下行来删除它:

pod 'Google-Maps-iOS-Utils', :git => 'https://github.com/googlemaps/google-maps-ios-utils.git', :commit => '637954e5bcb2a879c11a6f2cead153a6bad5339f'

然后从 ios/App/ 文件夹运行 pod update Google-Maps-iOS-Utils:

cd ios/App
pod update Google-Maps-iOS-Utils

Android​

Android 的 Google Maps SDK 要求您将 API 密钥添加到项目中的 AndroidManifest.xml 文件中。

<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY_HERE"/>

要使用某些位置功能,SDK 还要求在您的 AndroidManifest.xml 中添加以下权限:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

变量​

此插件将使用以下项目变量(在应用的 variables.gradle 文件中定义):

  • googleMapsPlayServicesVersion:com.google.android.gms:play-services-maps 的版本(默认值:18.2.0)
  • googleMapsUtilsVersion:com.google.maps.android:android-maps-utils 的版本(默认值:3.8.2)
  • googleMapsKtxVersion:com.google.maps.android:maps-ktx 的版本(默认值:5.0.0)
  • googleMapsUtilsKtxVersion:com.google.maps.android:maps-utils-ktx 的版本(默认值:5.0.0)
  • kotlinxCoroutinesVersion:org.jetbrains.kotlinx:kotlinx-coroutines-android 和 org.jetbrains.kotlinx:kotlinx-coroutines-core 的版本(默认值:1.7.3)
  • androidxCoreKTXVersion:androidx.core:core-ktx 的版本(默认值:1.12.0)
  • kotlin_version:org.jetbrains.kotlin:kotlin-stdlib 的版本(默认值:1.9.10)

使用​

Google Maps Capacitor 插件附带一个 Web 组件,必须在您的应用中使用该组件来渲染地图,因为它使我们能够更有效地在 iOS 上嵌入原生视图。该插件将自动注册此 Web 组件以供您的应用使用。

对于 Angular 用户,您将收到一个错误警告,提示此 Web 组件对 Angular 编译器来说是未知的。这可以通过修改声明您的组件的模块以允许自定义 Web 组件来解决。

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

在您的 HTML 中包含此组件并为其分配一个 ID,以便您以后可以轻松查询该元素引用。

<capacitor-google-map id="map"></capacitor-google-map>

在 Android 上,地图渲染在整个 WebView 下方,并使用此组件在滚动事件期间管理其定位。这意味着作为开发者,您必须确保 WebView 在所有层中透明到底部。在典型的 Ionic 应用程序中,这意味着在 IonContent 和根 HTML 标签等元素上设置透明度,以确保地图可见。如果您在 Android 上看不到地图,这应该是您首先检查的地方。

在 iOS 上,我们直接将地图渲染到 WebView 中,因此不需要相同的透明效果。我们仍在研究 Android 的替代方法,并希望在未来的更新中更好地解决这个问题。

Google Map 元素本身没有样式,因此您应该为其设置样式以适合页面布局。因为我们正在将视图渲染到这个插槽中,元素本身没有宽度或高度,所以请务必显式设置它们。

capacitor-google-map {
display: inline-block;
width: 275px;
height: 400px;
}

接下来,我们应该创建地图引用。这是通过从 Capacitor 插件导入 GoogleMap 类并调用 create 方法,传入所需参数来完成的。

import { GoogleMap } from '@capacitor/google-maps';

const apiKey = 'YOUR_API_KEY_HERE';

const mapRef = document.getElementById('map');

const newMap = await GoogleMap.create({
id: 'my-map', // 此地图实例的唯一标识符
element: mapRef, // capacitor-google-map 元素的引用
apiKey: apiKey, // 您的 Google Maps API 密钥
config: {
center: {
// 地图要渲染的初始位置
lat: 33.6,
lng: -117.9,
},
zoom: 8, // 地图要渲染的初始缩放级别
},
});

此时,您的地图应该在应用中创建完成。使用返回的地图引用,您可以通过多种方式与地图进行交互,以下是一些示例。

const newMap = await GoogleMap.create({...});

// 向地图添加标记
const markerId = await newMap.addMarker({
coordinate: {
lat: 33.6,
lng: -117.9
}
});

// 以编程方式移动地图
await newMap.setCamera({
coordinate: {
lat: 33.6,
lng: -117.9
}
});

// 启用标记聚类
await newMap.enableClustering();

// 处理标记点击
await newMap.setOnMarkerClickListener((event) => {...});

// 清理地图引用
await newMap.destroy();

完整示例​

Angular​

import { GoogleMap } from '@capacitor/google-maps';

@Component({
template: `
<capacitor-google-map #map></capacitor-google-map>
<button (click)="createMap()">Create Map</button>
`,
styles: [
`
capacitor-google-map {
display: inline-block;
width: 275px;
height: 400px;
}
`,
],
})
export class MyMap {
@ViewChild('map')
mapRef: ElementRef<HTMLElement>;
newMap: GoogleMap;

async createMap() {
this.newMap = await GoogleMap.create({
id: 'my-cool-map',
element: this.mapRef.nativeElement,
apiKey: environment.apiKey,
config: {
center: {
lat: 33.6,
lng: -117.9,
},
zoom: 8,
},
});
}
}

React​

import { GoogleMap } from '@capacitor/google-maps';
import { useRef } from 'react';

const MyMap: React.FC = () => {
const mapRef = useRef<HTMLElement>();
let newMap: GoogleMap;

async function createMap() {
if (!mapRef.current) return;

newMap = await GoogleMap.create({
id: 'my-cool-map',
element: mapRef.current,
apiKey: process.env.REACT_APP_YOUR_API_KEY_HERE,
config: {
center: {
lat: 33.6,
lng: -117.9
},
zoom: 8
}
})
}

return (
<div className="component-wrapper">
<capacitor-google-map ref={mapRef} style={{
display: 'inline-block',
width: 275,
height: 400
}}></capacitor-google-map>

<button onClick={createMap}>Create Map</button>
</div>
)
}

export default MyMap;

Javascript​

<capacitor-google-map id="map"></capacitor-google-map>
<button onclick="createMap()">Create Map</button>

<style>
capacitor-google-map {
display: inline-block;
width: 275px;
height: 400px;
}
</style>

<script>
import { GoogleMap } from '@capacitor/google-maps';

const createMap = async () => {
const mapRef = document.getElementById('map');

const newMap = await GoogleMap.create({
id: 'my-map', // 此地图实例的唯一标识符
element: mapRef, // capacitor-google-map 元素的引用
apiKey: 'YOUR_API_KEY_HERE', // 您的 Google Maps API 密钥
config: {
center: {
// 地图要渲染的初始位置
lat: 33.6,
lng: -117.9,
},
zoom: 8, // 地图要渲染的初始缩放级别
},
});
};
</script>

API​

create(...)​

create(options: CreateMapArgs, callback?: MapListenerCallback<MapReadyCallbackData> | undefined) => Promise<GoogleMap>
参数类型
options
CreateMapArgs
callback
MapListenerCallback<MapReadyCallbackData>

返回: Promise<GoogleMap>


enableTouch()​

enableTouch() => Promise<void>

disableTouch()​

disableTouch() => Promise<void>

enableClustering(...)​

enableClustering(minClusterSize?: number | undefined) => Promise<void>
参数类型描述
minClusterSizenumber可以聚类在一起的最小标记数。默认值为 4 个标记。

disableClustering()​

disableClustering() => Promise<void>

addMarker(...)​

addMarker(marker: Marker) => Promise<string>
参数类型
marker
Marker

返回: Promise<string>


addMarkers(...)​

addMarkers(markers: Marker[]) => Promise<string[]>
参数类型
markersMarker[]

返回: Promise<string[]>


removeMarker(...)​

removeMarker(id: string) => Promise<void>
参数类型
idstring

removeMarkers(...)​

removeMarkers(ids: string[]) => Promise<void>
参数类型
idsstring[]

addPolygons(...)​

addPolygons(polygons: Polygon[]) => Promise<string[]>
参数类型
polygonsPolygon[]

返回: Promise<string[]>


removePolygons(...)​

removePolygons(ids: string[]) => Promise<void>
参数类型
idsstring[]

addCircles(...)​

addCircles(circles: Circle[]) => Promise<string[]>
参数类型
circlesCircle[]

返回: Promise<string[]>


removeCircles(...)​

removeCircles(ids: string[]) => Promise<void>
参数类型
idsstring[]

addPolylines(...)​

addPolylines(polylines: Polyline[]) => Promise<string[]>
参数类型
polylinesPolyline[]

返回: Promise<string[]>


removePolylines(...)​

removePolylines(ids: string[]) => Promise<void>
参数类型
idsstring[]

destroy()​

destroy() => Promise<void>

setCamera(...)​

setCamera(config: CameraConfig) => Promise<void>
参数类型
config
CameraConfig

getMapType()​

getMapType() => Promise<MapType>

获取当前地图类型。

返回:

Promise<MapType>


setMapType(...)​

setMapType(mapType: MapType) => Promise<void>
参数类型
mapType
MapType

enableIndoorMaps(...)​

enableIndoorMaps(enabled: boolean) => Promise<void>
参数类型
enabledboolean

enableTrafficLayer(...)​

enableTrafficLayer(enabled: boolean) => Promise<void>
参数类型
enabledboolean

enableAccessibilityElements(...)​

enableAccessibilityElements(enabled: boolean) => Promise<void>
参数类型
enabledboolean

enableCurrentLocation(...)​

enableCurrentLocation(enabled: boolean) => Promise<void>
参数类型
enabledboolean

setPadding(...)​

setPadding(padding: MapPadding) => Promise<void>
参数类型
padding
MapPadding

getMapBounds()​

getMapBounds() => Promise<LatLngBounds>

获取地图当前视口的纬度和经度边界。

返回: Promise<LatLngBounds>


fitBounds(...)​

fitBounds(bounds: LatLngBounds, padding?: number | undefined) => Promise<void>

将地图视口设置为包含给定的边界。

参数类型描述
boundsLatLngBounds要适应视口的边界。
paddingnumber可选的要应用的像素内边距。边界将适应移除内边距后剩余的地图部分。

setOnBoundsChangedListener(...)​

setOnBoundsChangedListener(callback?: MapListenerCallback<CameraIdleCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<CameraIdleCallbackData>

setOnCameraIdleListener(...)​

setOnCameraIdleListener(callback?: MapListenerCallback<CameraIdleCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<CameraIdleCallbackData>

setOnCameraMoveStartedListener(...)​

setOnCameraMoveStartedListener(callback?: MapListenerCallback<CameraMoveStartedCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<CameraMoveStartedCallbackData>

setOnClusterClickListener(...)​

setOnClusterClickListener(callback?: MapListenerCallback<ClusterClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<ClusterClickCallbackData>

setOnClusterInfoWindowClickListener(...)​

setOnClusterInfoWindowClickListener(callback?: MapListenerCallback<ClusterClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<ClusterClickCallbackData>

setOnInfoWindowClickListener(...)​

setOnInfoWindowClickListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<MarkerClickCallbackData>

setOnMapClickListener(...)​

setOnMapClickListener(callback?: MapListenerCallback<MapClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<MapClickCallbackData>

setOnMarkerClickListener(...)​

setOnMarkerClickListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<MarkerClickCallbackData>

setOnPolygonClickListener(...)​

setOnPolygonClickListener(callback?: MapListenerCallback<PolygonClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<PolygonClickCallbackData>

setOnCircleClickListener(...)​

setOnCircleClickListener(callback?: MapListenerCallback<CircleClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<CircleClickCallbackData>

setOnPolylineClickListener(...)​

setOnPolylineClickListener(callback?: MapListenerCallback<PolylineCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<PolylineCallbackData>

setOnMarkerDragStartListener(...)​

setOnMarkerDragStartListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<MarkerClickCallbackData>

setOnMarkerDragListener(...)​

setOnMarkerDragListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<MarkerClickCallbackData>

setOnMarkerDragEndListener(...)​

setOnMarkerDragEndListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<MarkerClickCallbackData>

setOnMyLocationButtonClickListener(...)​

setOnMyLocationButtonClickListener(callback?: MapListenerCallback<MyLocationButtonClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<MyLocationButtonClickCallbackData>

setOnMyLocationClickListener(...)​

setOnMyLocationClickListener(callback?: MapListenerCallback<MapClickCallbackData> | undefined) => Promise<void>
参数类型
callback
MapListenerCallback<MapClickCallbackData>

接口​

CreateMapArgs​

创建地图时使用的选项接口。

属性类型描述默认值
idstring地图实例的唯一标识符。
apiKeystringGoogle Maps SDK API 密钥。
config
GoogleMapConfig
地图的初始配置设置。
elementHTMLElementGoogle Map View 将挂载的 DOM 元素,决定大小和定位。
forceCreateboolean如果具有提供 ID 的地图已存在,则销毁并重新创建地图实例。false
regionstringregion 参数改变您的应用以提供不同的地图瓦片或偏置应用(例如将地理编码结果偏向该区域)。仅适用于 Web。
languagestringlanguage 参数影响控件名称、版权声明、驾车路线和控件标签的名称,以及服务请求的响应。仅适用于 Web。

GoogleMapConfig​

对于 Web,所有 JavaScript Google Maps 选项都可用,因为 GoogleMapConfig 扩展了 google.maps.MapOptions。 对于 iOS 和 Android,只有 GoogleMapConfig 上声明的配置选项可用。

属性类型描述默认值始于
widthnumber覆盖原生地图的宽度。
heightnumber覆盖原生地图的高度。
xnumber覆盖原生地图的绝对 x 坐标位置。
ynumber覆盖原生地图的绝对 y 坐标位置。
center
LatLng
相机指向的地球上的默认位置。
zoomnumber设置地图的缩放级别。
androidLiteModeboolean在 Android 上启用基于图像的轻量模式。false
devicePixelRationumber覆盖原生地图的像素比。
stylesMapTypeStyle[] | null应用于每个默认地图类型的样式。注意,对于卫星、混合和地形模式,这些样式仅适用于标签和几何图形。4.3.0
mapIdstring与特定地图样式或功能关联的地图 ID。使用地图 ID 仅适用于 Web。5.4.0
androidMapIdstring与特定地图样式或功能关联的地图 ID。使用地图 ID 仅适用于 Android。5.4.0
iOSMapIdstring与特定地图样式或功能关联的地图 ID。使用地图 ID 仅适用于 iOS。5.4.0

LatLng​

表示一对纬度和经度坐标的接口。

属性类型描述
latnumber纬度坐标,以度为单位。取值范围为 [-90, 90]。
lngnumber经度坐标,以度为单位。取值范围为 [-180, 180]。

MapReadyCallbackData​

属性类型
mapIdstring

Marker​

标记是放置在地图表面特定点上的图标。

属性类型描述默认值始于
coordinate
LatLng
Marker 位置
opacitynumber设置标记的不透明度,介于 0(完全透明)和 1(含)之间。1
titlestring标题,叠加层的简短描述。
snippetstring摘要文本,选中时显示在信息窗口的标题下方。
isFlatboolean控制此标记应平贴在地球表面还是面向相机的广告牌。false
iconUrlstring要渲染的标记图标的路径。可以是相对于 Web 应用公共目录的路径,或远程标记图标的 https URL。原生平台不支持 SVG。4.2.0
iconSize
Size
控制 iconUrl 中设置的标记图像的缩放大小。4.2.0
iconOrigin
Point
图像在精灵图中的位置(如果有)。默认情况下,原点位于图像的左上角。4.2.0
iconAnchor
Point
将图像锚定到地图上标记对应位置的位置。默认情况下,锚点位于图像底部中心点。4.2.0
tintColor{ r: number; g: number; b: number; a: number; }自定义默认标记图像的颜色。每个值必须在 0 到 255 之间。仅适用于 iOS 和 Android。4.2.0
draggableboolean控制此标记是否可以通过交互拖动。false
zIndexnumber指定此标记相对于地图上其他标记的堆叠顺序。z-index 高的标记绘制在 z-index 低的标记之上。0

Size​

属性类型
widthnumber
heightnumber

Point​

Point 几何对象。 https://tools.ietf.org/html/rfc7946#section-3.1.2

属性类型描述
type
'Point'
指定 GeoJSON 对象的类型。
coordinates
Position

Polygon​

Polygon 几何对象。 https://tools.ietf.org/html/rfc7946#section-3.1.6

属性类型描述
type
'Polygon'
指定 GeoJSON 对象的类型。
coordinatesPosition[][]

Circle​

对于 Web,所有 JavaScript Circle 选项都可用,因为 Polygon 扩展了 google.maps.CircleOptions。 对于 iOS 和 Android,只有 Circle 上声明的配置选项可用。

属性类型描述
fillColorstring填充颜色。除扩展命名颜色外,支持所有 CSS3 颜色。
fillOpacitynumber填充不透明度,介于 0.0 和 1.0 之间。
strokeColorstring描边颜色。除扩展命名颜色外,支持所有 CSS3 颜色。
strokeWeightnumber描边宽度(以像素为单位)。
geodesicboolean
clickableboolean指示此 Circle 是否处理鼠标事件。
titlestring标题,叠加层的简短描述。某些叠加层(如标记)会在地图上显示标题。标题也是默认的无障碍文本。仅适用于 iOS。
tagstring

Polyline​

对于 Web,所有 JavaScript Polyline 选项都可用,因为 Polyline 扩展了 google.maps.PolylineOptions。 对于 iOS 和 Android,只有 Polyline 上声明的配置选项可用。

属性类型描述
strokeColorstring描边颜色。除扩展命名颜色外,支持所有 CSS3 颜色。
strokeOpacitynumber描边不透明度,介于 0.0 和 1.0 之间。
strokeWeightnumber描边宽度(以像素为单位)。
geodesicboolean当为 true 时,多边形边缘被解释为测地线,将遵循地球的曲率。当为 false 时,多边形边缘作为屏幕空间中的直线渲染。请注意,测地多边形的形状在拖动时可能会发生变化,因为尺寸是相对于地球表面保持的。
clickableboolean指示此 Polyline 是否处理鼠标事件。
tagstring
styleSpansStyleSpan[]用于指定折线的一个或多个线段的颜色。styleSpans 属性是 StyleSpan 对象的数组。设置 spans 属性是更改折线颜色的首选方式。仅适用于 iOS 和 Android。

StyleSpan​

描述折线某区域的样式。

属性类型描述
colorstring描边颜色。除扩展命名颜色外,支持所有 CSS3 颜色。
segmentsnumber此跨度的长度(以线段数表示)。

CameraConfig​

Google 地图相机的配置属性。

属性类型描述默认值
coordinate
LatLng
相机指向的地球上的位置。
zoomnumber设置地图的缩放级别。
bearingnumber相机的方位角,以度为单位,从正北方向顺时针测量。0
anglenumber相机与天底(直接面向地球)的角度,以度为单位。允许的值仅为 0 和 45。0
animateboolean是否动画过渡到新的相机属性。false
animationDurationnumber此配置选项未被使用。

MapPadding​

用于设置视图"可见"区域内边距的控件。

属性类型
topnumber
leftnumber
rightnumber
bottomnumber

CameraIdleCallbackData​

属性类型
mapIdstring
boundsLatLngBounds
bearingnumber
latitudenumber
longitudenumber
tiltnumber
zoomnumber

CameraMoveStartedCallbackData​

属性类型
mapIdstring
isGestureboolean

ClusterClickCallbackData​

属性类型
mapIdstring
latitudenumber
longitudenumber
sizenumber
itemsMarkerCallbackData[]

MarkerCallbackData​

属性类型
markerIdstring
latitudenumber
longitudenumber
titlestring
snippetstring

MarkerClickCallbackData​

属性类型
mapIdstring

MapClickCallbackData​

属性类型
mapIdstring
latitudenumber
longitudenumber

PolygonClickCallbackData​

属性类型
mapIdstring
polygonIdstring
tagstring

CircleClickCallbackData​

属性类型
mapIdstring
circleIdstring
tagstring

PolylineCallbackData​

属性类型
polylineIdstring
tagstring

MyLocationButtonClickCallbackData​

属性类型
mapIdstring

类型别名​

MapListenerCallback​

当地图事件触发时调用的回调函数。

(data: T): void

Position​

Position 是一个坐标数组。 https://tools.ietf.org/html/rfc7946#section-3.1.1 数组应包含两到三个元素。 先前的 GeoJSON 规范允许更多元素(例如,可用于表示 M 值), 但当前规范只允许定义 X、Y 和(可选)Z。

number[]

枚举​

MapType​

成员值描述
Normal'Normal'基本地图。
Hybrid'Hybrid'带有道路和标签的卫星图像。
Satellite'Satellite'不带标签的卫星图像。
Terrain'Terrain'地形数据。
None'None'无基础地图瓦片。