版本：v8

@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)

有关在 Xcode 中设置 iOS 权限的更多信息，请阅读 iOS 指南中的配置 Info.plist。

Typescript 配置

你的项目还需要在 tsconfig.json 中将 skipLibCheck 设置为 true。

从旧版本迁移

目前主要的 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 的版本（默认：19.2.0）
googleMapsUtilsVersion: com.google.maps.android:android-maps-utils 的版本（默认：3.19.1）
googleMapsKtxVersion: com.google.maps.android:maps-ktx 的版本（默认：5.2.1）
googleMapsUtilsKtxVersion: com.google.maps.android:maps-utils-ktx 的版本（默认：5.2.1）
kotlinxCoroutinesVersion: org.jetbrains.kotlinx:kotlinx-coroutines-android 和 org.jetbrains.kotlinx:kotlinx-coroutines-core 的版本（默认：1.10.2）
androidxCoreKTXVersion: androidx.core:core-ktx 的版本（默认：1.17.0）
kotlin_version: org.jetbrains.kotlin:kotlin-stdlib 的版本（默认：2.2.20）

使用

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

对于 Angular 用户，你会收到一个警告错误，提示 Angular 编译器不认识这个 Web 组件。可以通过修改声明组件的模块来允许自定义 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 地图元素本身没有样式，因此你应该为其设置样式以适合页面的布局结构。由于我们正在向此插槽渲染一个视图，元素本身没有宽度或高度，因此请务必显式设置这些值。

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()">创建地图</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}>创建地图</button>
    </div>
  )
}

export default MyMap;

你可能需要在 React 中为自定义元素创建一个 *.d.ts 文件：

// custom-elements.d.ts

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "capacitor-google-map": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      >;
    }
  }
}

export {};

Vue

<script lang="ts" setup>
import { ref, shallowRef, useTemplateRef } from 'vue'
import { GoogleMap } from '@capacitor/google-maps'

const mapRef = useTemplateRef<HTMLElement>('mapRef')
const newMap = shallowRef<GoogleMap>()

async function createMap() {
  if (!mapRef.value) return

  newMap.value = await GoogleMap.create({
    id: 'my-cool-map',
    element: mapRef.value,
    apiKey: import.meta.env.VITE_YOUR_API_KEY_HERE,
    config: {
      center: {
        lat: 33.6,
        lng: -117.9,
      },
      zoom: 8,
    },
  })
}
</script>

<template>
  <capacitor-google-map
    ref="mapRef"
    style="display: inline-block; width: 275px; height: 400px"
  ></capacitor-google-map>
  <button @click="createMap()">创建地图</button>
</template>

请确保启用识别原生自定义元素功能，例如：

// vite.config.mts > plugins
Vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('capacitor-')
    },
  },
}),

JavaScript

<capacitor-google-map id="map"></capacitor-google-map>
<button onclick="createMap()">创建地图</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(...)
enableTouch()
disableTouch()
enableClustering(...)
disableClustering()
addTileOverlay(...)
removeTileOverlay(...)
addMarker(...)
addMarkers(...)
removeMarker(...)
removeMarkers(...)
addPolygons(...)
removePolygons(...)
addCircles(...)
removeCircles(...)
addPolylines(...)
removePolylines(...)
destroy()
setCamera(...)
getMapType()
setMapType(...)
enableIndoorMaps(...)
enableTrafficLayer(...)
enableAccessibilityElements(...)
enableCurrentLocation(...)
setPadding(...)
getMapBounds()
fitBounds(...)
setOnBoundsChangedListener(...)
setOnCameraIdleListener(...)
setOnCameraMoveStartedListener(...)
setOnClusterClickListener(...)
setOnClusterInfoWindowClickListener(...)
setOnInfoWindowClickListener(...)
setOnMapClickListener(...)
setOnMarkerClickListener(...)
setOnPolygonClickListener(...)
setOnCircleClickListener(...)
setOnPolylineClickListener(...)
setOnMarkerDragStartListener(...)
setOnMarkerDragListener(...)
setOnMarkerDragEndListener(...)
setOnMyLocationButtonClickListener(...)
setOnMyLocationClickListener(...)
接口
类型别名
枚举

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>

参数	类型	描述
`minClusterSize`	`number`	能够聚集在一起的最小标记数量，默认值为 4 个标记。

disableClustering()

disableClustering() => Promise<void>

addTileOverlay(...)

addTileOverlay(tileOverlay: TileOverlay) => Promise<{ id: string; }>

参数	类型
`tileOverlay`	`TileOverlay`

返回值: Promise<{ id: string; }>

removeTileOverlay(...)

removeTileOverlay(id: string) => Promise<void>

参数	类型
`id`	`string`

addMarker(...)

addMarker(marker: Marker) => Promise<string>

参数	类型
`marker`	`Marker`

返回值: Promise<string>

addMarkers(...)

addMarkers(markers: Marker[]) => Promise<string[]>

参数	类型
`markers`	`Marker[]`

返回值: Promise<string[]>

removeMarker(...)

removeMarker(id: string) => Promise<void>

参数	类型
`id`	`string`

removeMarkers(...)

removeMarkers(ids: string[]) => Promise<void>

参数	类型
`ids`	`string[]`

addPolygons(...)

addPolygons(polygons: Polygon[]) => Promise<string[]>

参数	类型
`polygons`	`Polygon[]`

返回值: Promise<string[]>

removePolygons(...)

removePolygons(ids: string[]) => Promise<void>

参数	类型
`ids`	`string[]`

addCircles(...)

addCircles(circles: Circle[]) => Promise<string[]>

参数	类型
`circles`	`Circle[]`

返回值: Promise<string[]>

removeCircles(...)

removeCircles(ids: string[]) => Promise<void>

参数	类型
`ids`	`string[]`

addPolylines(...)

addPolylines(polylines: Polyline[]) => Promise<string[]>

参数	类型
`polylines`	`Polyline[]`

返回值: Promise<string[]>

removePolylines(...)

removePolylines(ids: string[]) => Promise<void>

参数	类型
`ids`	`string[]`

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>

参数	类型
`enabled`	`boolean`

enableTrafficLayer(...)

enableTrafficLayer(enabled: boolean) => Promise<void>

参数	类型
`enabled`	`boolean`

enableAccessibilityElements(...)

enableAccessibilityElements(enabled: boolean) => Promise<void>

参数	类型
`enabled`	`boolean`

enableCurrentLocation(...)

enableCurrentLocation(enabled: boolean) => Promise<void>

参数	类型
`enabled`	`boolean`

setPadding(...)

setPadding(padding: MapPadding) => Promise<void>

参数	类型
`padding`	`MapPadding`

getMapBounds()

getMapBounds() => Promise<LatLngBounds>

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

返回值: Promise<LatLngBounds>

--------------------### fitBounds(...)

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

将地图视口调整至包含给定的边界范围。

参数	类型	描述
`bounds`	`LatLngBounds`	需要适配到视口中的边界范围。
`padding`	`number`	可选的内边距（以像素为单位）。在减去内边距后剩余的地图区域内适配边界范围。

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

一个包含创建地图时所用选项的接口。

属性	类型	描述	默认值
`id`	`string`	地图实例的唯一标识符。
`apiKey`	`string`	Google Maps SDK API 密钥。
`config`	`GoogleMapConfig`	地图的初始配置设置。
`element`	`HTMLElement`	Google 地图视图将挂载的 DOM 元素，它决定了地图的大小和定位。
`forceCreate`	`boolean`	如果已存在具有所提供 id 的地图实例，则销毁并重新创建它。	`false`
`region`	`string`	区域参数会更改您的应用以提供不同的地图图块或使应用产生偏向（例如，使地理编码结果偏向该区域）。仅适用于 Web 平台。
`language`	`string`	语言参数会影响控件名称、版权声明、驾驶路线、控件标签的显示，以及服务请求的响应。仅适用于 Web 平台。

在 Web 端，所有 JavaScript 版本的 Google Maps 选项都可用，因为 GoogleMapConfig 扩展了 google.maps.MapOptions。在 iOS 和 Android 端，只有 GoogleMapConfig 上声明的配置选项可用。| 属性 | 类型 | 描述 | 默认值 | 引入版本 | | ---------------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------- | | width | number | 覆盖原生地图的宽度。 | | | | height | number | 覆盖原生地图的高度。 | | | | x | number | 覆盖原生地图的绝对 X 坐标位置。 | | | | y | number | 覆盖原生地图的绝对 Y 坐标位置。 | | | | center |

LatLng

| 地图摄像机指向的地球上的默认位置。 | | | | zoom | number | 设置地图的缩放级别。 | | | | androidLiteMode | boolean | 在 Android 上启用基于图像的轻量模式。 | false | | | devicePixelRatio | number | 覆盖原生地图的像素比率。 | | | | styles | MapTypeStyle[] | null | 应用于每个默认地图类型的样式。注意：对于卫星、混合和地形模式，这些样式仅适用于标签和几何图形。 | | 4.3.0 | | mapId | string | 与特定地图样式或功能关联的地图 ID。使用地图 ID 仅适用于 Web。 | | 5.4.0 | | androidMapId | string | 与特定地图样式或功能关联的地图 ID。使用地图 ID 仅适用于 Android。 | | 5.4.0 | | iOSMapId | string | 与特定地图样式或功能关联的地图 ID。使用地图 ID 仅适用于 iOS。 | | 5.4.0 | | maxZoom | number | null | 地图上显示的最大缩放级别。如果省略或设置为 <code>null</code>，则使用当前地图类型的最大缩放级别。有效的缩放值是从零到支持的 <a href="https://developers.google.com/maps/documentation/javascript/maxzoom">最大缩放级别</a> 的数字。 | | | | minZoom | number | null | 地图上显示的最小缩放级别。如果省略或设置为 <code>null</code>，则使用当前地图类型的最小缩放级别。有效的缩放值是从零到支持的 <a href="https://developers.google.com/maps/documentation/javascript/maxzoom">最大缩放级别</a> 的数字。 | | | | mapTypeId | string | null | 初始地图的 mapTypeId。默认为 <code>ROADMAP</code>。 | | || heading | number | null | 航拍影像的朝向，以正北方向为基准，按顺时针方向以度数表示。朝向会自动捕捉到有可用影像的最接近角度。 | | | | restriction | MapRestriction | null | 定义限制用户可访问地图区域的边界。设置后，用户只能在相机视图保持在边界限制范围内时进行平移和缩放操作。 | | |#### LatLng

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

属性	类型	描述
`lat`	`number`	纬度坐标，单位度。取值范围为 [-90, 90]。
`lng`	`number`	经度坐标，单位度。取值范围为 [-180, 180]。

MapReadyCallbackData

属性	类型
`mapId`	`string`

TileOverlay

瓦片覆盖层是在特定缩放级别下放置在地图顶部的图像。支持 iOS、Android 和 Web 平台。

属性	类型	描述	默认值
`url`	`string`	表示瓦片 URL 的字符串。应包含 `{x}`、`{y}` 和 `{z}` 以便替换为实际的 x、y 和缩放值。支持 iOS、Android 和 Web 平台。
`opacity`	`number`	瓦片覆盖层的不透明度，介于 0（完全透明）到 1（含）之间。支持 iOS、Android 和 Web 平台。	`undefined`
`visible`	`boolean`	控制此瓦片覆盖层是否可见。仅支持 Android 平台。	`undefined`
`zIndex`	`number`	瓦片覆盖层的 z 轴索引。支持 iOS 和 Android 平台。	`undefined`

Marker

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

属性	类型	描述	默认值	自版本
`coordinate`	`LatLng`	标记的位置
`opacity`	`number`	设置标记的不透明度，介于 0（完全透明）到 1（含）之间。	`1`
`title`	`string`	标题，覆盖层的简短描述。
`snippet`	`string`	摘要文本，在选中时显示在信息窗口的标题下方。
`isFlat`	`boolean`	控制此标记是否应平贴在地球表面，或是面向相机的广告牌形式。	`false`
`iconUrl`	`string`	要渲染的标记图标路径。可以是相对于 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
`draggable`	`boolean`	控制此标记是否可以通过交互拖动。	`false`
`zIndex`	`number`	指定此标记相对于地图上其他标记的堆叠顺序。具有较高 z-index 的标记会绘制在具有较低 z-index 的标记之上。	`0`

Size

属性	类型
`width`	`number`
`height`	`number`

Point

属性	类型
`x`	`number`
`y`	`number`

在网页端，所有 JavaScript Polygon 选项均可使用，因为 Polygon 扩展了 google.maps.PolygonOptions。在 iOS 和 Android 平台，只有 Polygon 上声明的配置选项可用。| 属性 | 类型 | 说明 | | ------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | paths | any[] | MVCArray<any> | 定义闭合环的有序坐标序列。与折线不同，多边形可以包含一个或多个路径。因此，paths 属性可以指定一个或多个 <code>LatLng</code> 坐标数组。路径会自动闭合；无需将路径的第一个顶点重复作为最后一个顶点。简单多边形可以使用单个 <code>LatLng</code> 数组定义。更复杂的多边形可以指定数组的数组。任何简单数组都会被转换为 <code><a href="#MVCArray">MVCArray</a></code>。从 <code>MVCArray</code> 中插入或删除 <code>LatLng</code> 坐标会自动更新地图上的多边形。 | | strokeColor | string | 描边颜色。支持所有 CSS3 颜色，但不包括扩展命名颜色。 | | strokeOpacity | number | 描边的不透明度，取值范围为 0.0 到 1.0。 | | strokeWeight | number | 描边的宽度，单位为像素。 | | fillColor | string | 填充颜色。支持所有 CSS3 颜色，但不包括扩展命名颜色。 | | fillOpacity | number | 填充的不透明度，取值范围为 0.0 到 1.0。 || geodesic | boolean | 当设为 <code>true</code> 时，多边形的边将被解释为测地线并会沿着地球的曲率延伸。当设为 <code>false</code> 时，多边形的边将在屏幕空间中以直线渲染。请注意，拖动时测地线多边形的形状可能会发生变化，因为其尺寸是相对于地球表面保持的。 | | clickable | boolean | 指示此 <code>Polygon</code> 是否处理鼠标事件。 | | title | string | 标题，即覆盖物的简短描述。某些覆盖物（例如标记）会在地图上显示标题。标题也是默认的无障碍访问文本。仅 iOS 可用。 | | tag | string | |#### 圆形

在 Web 端，所有 JavaScript Circle 选项均可用，因为 Circle 继承了 google.maps.CircleOptions。在 iOS 和 Android 端，仅支持 Circle 上声明的配置选项。

属性	类型	描述
`fillColor`	`string`	填充颜色。支持所有 CSS3 颜色，但不包括扩展的命名颜色。
`fillOpacity`	`number`	填充不透明度，取值范围在 0.0 到 1.0 之间。
`strokeColor`	`string`	描边颜色。支持所有 CSS3 颜色，但不包括扩展的命名颜色。
`strokeWeight`	`number`	描边宽度（以像素为单位）。
`geodesic`	`boolean`
`clickable`	`boolean`	指示此 <code>Circle</code> 是否处理鼠标事件。
`title`	`string`	标题，即叠加层的简短描述。某些叠加层（例如标记）会在地图上显示标题。标题也是默认的无障碍文本。仅限 iOS 平台。
`tag`	`string`

折线

在 Web 端，所有 JavaScript Polyline 选项均可用，因为 Polyline 继承了 google.maps.PolylineOptions。在 iOS 和 Android 端，仅支持 Polyline 上声明的配置选项。

属性	类型	描述
`strokeColor`	`string`	描边颜色。支持所有 CSS3 颜色，但不包括扩展的命名颜色。
`strokeOpacity`	`number`	描边不透明度，取值范围在 0.0 到 1.0 之间。
`strokeWeight`	`number`	描边宽度（以像素为单位）。
`geodesic`	`boolean`	当为 <code>true</code> 时，多边形的边将被解释为测地线并遵循地球曲率。当为 <code>false</code> 时，多边形的边在屏幕空间中将呈现为直线。请注意，测地线多边形的形状在被拖动时可能会发生变化，因为其尺寸会相对于地球表面保持不变。
`clickable`	`boolean`	指示此 <code>Polyline</code> 是否处理鼠标事件。
`tag`	`string`
`styleSpans`	`StyleSpan[]`	用于指定折线一个或多个线段的颜色。styleSpans 属性是一个 StyleSpan 对象数组。设置 spans 属性是更改折线颜色的推荐方式。仅在 iOS 和 Android 平台可用。

样式跨度（StyleSpan）

描述折线某一部分的样式。

属性	类型	描述
`color`	`string`	描边颜色。支持所有 CSS3 颜色，但不包括扩展的命名颜色。
`segments`	`number`	此跨度所包含的线段数量。

Google 地图摄像头的配置属性

属性	类型	说明	默认值
`coordinate`	`LatLng`	摄像头指向的地球位置。
`zoom`	`number`	设置地图的缩放级别。
`bearing`	`number`	摄像头的方位角，以正北方向为基准顺时针计算的度数。	`0`
`angle`	`number`	摄像头与天底点（垂直指向地球）的角度，单位为度。仅允许的值为 0 和 45。	`0`
`animate`	`boolean`	是否以动画方式过渡到新的摄像头属性。	`false`
`animationDuration`	`number`	此配置选项暂未使用。

MapPadding

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

属性	类型
`top`	`number`
`left`	`number`
`right`	`number`
`bottom`	`number`

CameraIdleCallbackData

属性	类型
`mapId`	`string`
`bounds`	`LatLngBounds`
`bearing`	`number`
`latitude`	`number`
`longitude`	`number`
`tilt`	`number`
`zoom`	`number`

CameraMoveStartedCallbackData

属性	类型
`mapId`	`string`
`isGesture`	`boolean`

ClusterClickCallbackData

属性	类型
`mapId`	`string`
`latitude`	`number`
`longitude`	`number`
`size`	`number`
`items`	`MarkerCallbackData[]`

MarkerCallbackData

属性	类型
`markerId`	`string`
`latitude`	`number`
`longitude`	`number`
`title`	`string`
`snippet`	`string`

MarkerClickCallbackData

属性	类型
`mapId`	`string`

MapClickCallbackData

属性	类型
`mapId`	`string`
`latitude`	`number`
`longitude`	`number`

PolygonClickCallbackData

属性	类型
`mapId`	`string`
`polygonId`	`string`
`tag`	`string`

CircleClickCallbackData

属性	类型
`mapId`	`string`
`circleId`	`string`
`tag`	`string`

PolylineCallbackData

属性	类型
`polylineId`	`string`
`tag`	`string`

MyLocationButtonClickCallbackData

属性	类型
`mapId`	`string`

类型别名

MapListenerCallback

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

(data: T): void

Marker

支持“传统”或“高级”类型的标记。

google.maps.Marker | google.maps.marker.AdvancedMarkerElement

枚举

MapType

成员	值	说明
`Normal`	`'Normal'`	基础地图。
`Hybrid`	`'Hybrid'`	卫星图像附带道路和标签。
`Satellite`	`'Satellite'`	卫星图像，无标签。
`Terrain`	`'Terrain'`	地形数据。
`None`	`'None'`	无底图图块。

安装​

API 密钥​

iOS​

Typescript 配置​

从旧版本迁移​

Android​

变量​

使用​

完整示例### Angular​

React​

Vue​

JavaScript​

API​

create(...)​

enableTouch()​

disableTouch()​

disableClustering()​

addTileOverlay(...)​

removeTileOverlay(...)​

addMarker(...)​

addMarkers(...)​

removeMarker(...)​

removeMarkers(...)​

addPolygons(...)​

removePolygons(...)​

addCircles(...)​

removeCircles(...)​

addPolylines(...)​

removePolylines(...)​

destroy()​

setCamera(...)​

getMapType()​

setMapType(...)​

enableIndoorMaps(...)​

enableTrafficLayer(...)​

enableAccessibilityElements(...)​

enableCurrentLocation(...)​

setPadding(...)​

getMapBounds()​

setOnBoundsChangedListener(...)​

setOnCameraIdleListener(...)​

setOnCameraMoveStartedListener(...)​

setOnClusterClickListener(...)​

setOnClusterInfoWindowClickListener(...)​

setOnInfoWindowClickListener(...)​

setOnMapClickListener(...)​

setOnMarkerClickListener(...)​

setOnPolygonClickListener(...)​

setOnPolylineClickListener(...)​

setOnMarkerDragStartListener(...)​

setOnMarkerDragListener(...)​

setOnMarkerDragEndListener(...)​

setOnMyLocationButtonClickListener(...)​

setOnMyLocationClickListener(...)​

接口#### CreateMapArgs​

MapReadyCallbackData​

TileOverlay​

Marker​

Size​

Point​

折线​

样式跨度（StyleSpan）​

MapPadding​

CameraIdleCallbackData​

CameraMoveStartedCallbackData​

ClusterClickCallbackData​

MarkerCallbackData​

MarkerClickCallbackData​

MapClickCallbackData​

PolygonClickCallbackData​

CircleClickCallbackData​

PolylineCallbackData​

MyLocationButtonClickCallbackData​

类型别名​

MapListenerCallback​

Marker​

枚举​

MapType​

Contents

安装

API 密钥

iOS

Typescript 配置

从旧版本迁移

Android

变量

使用

完整示例### Angular

React

Vue

JavaScript

API

create(...)

enableTouch()

disableTouch()

disableClustering()

addTileOverlay(...)

removeTileOverlay(...)

addMarker(...)

addMarkers(...)

removeMarker(...)

removeMarkers(...)

addPolygons(...)

removePolygons(...)

addCircles(...)

removeCircles(...)

addPolylines(...)

removePolylines(...)

destroy()

setCamera(...)

getMapType()

setMapType(...)

enableIndoorMaps(...)

enableTrafficLayer(...)

enableAccessibilityElements(...)

enableCurrentLocation(...)

setPadding(...)

getMapBounds()

setOnBoundsChangedListener(...)

setOnCameraIdleListener(...)

setOnCameraMoveStartedListener(...)

setOnClusterClickListener(...)

setOnClusterInfoWindowClickListener(...)

setOnInfoWindowClickListener(...)

setOnMapClickListener(...)

setOnMarkerClickListener(...)

setOnPolygonClickListener(...)

setOnPolylineClickListener(...)

setOnMarkerDragStartListener(...)

setOnMarkerDragListener(...)

setOnMarkerDragEndListener(...)

setOnMyLocationButtonClickListener(...)

setOnMyLocationClickListener(...)

接口#### CreateMapArgs

MapReadyCallbackData

TileOverlay

Marker

Size

Point

折线

样式跨度（StyleSpan）

MapPadding

CameraIdleCallbackData

CameraMoveStartedCallbackData

ClusterClickCallbackData

MarkerCallbackData

MarkerClickCallbackData

MapClickCallbackData

PolygonClickCallbackData

CircleClickCallbackData

PolylineCallbackData

MyLocationButtonClickCallbackData

类型别名

MapListenerCallback

Marker

枚举

MapType