@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（使用期间的定位权限描述）

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

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 用户，你会收到一个警告，提示此 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()">创建地图</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(...)
• Interfaces
• Type Aliases
• Enums

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 Map 视图将要挂载的 DOM 元素，决定其大小和定位。
forceCreate	boolean	如果具有相同 id 的地图已存在，则销毁并重新创建地图实例	false
region	string	region 参数会更改你的应用以提供不同的地图瓦片或偏置应用（例如将地理编码结果偏置到该区域）。仅 Web 平台可用。
language	string	language 参数会影响控件名称、版权声明、驾驶路线和控件标签，以及服务请求的响应。仅 Web 平台可用。

GoogleMapConfig

对于 Web，所有 javascript Google Maps 选项都可用，因为 GoogleMapConfig 继承了 google.maps.MapOptions。 对于 iOS 和 Android，只有 GoogleMapConfig 上声明的配置选项可用。

属性	类型	描述	默认值	Since
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>，则使用当前地图类型的最大缩放级别。有效的缩放值是从 0 到支持的 <a href="https://developers.google.com/maps/documentation/javascript/maxzoom"&gt;最大缩放级别&lt;/a> 的数字。
minZoom	number | null	地图上显示的最小缩放级别。如果省略或设置为 <code>null</code>，则使用当前地图类型的最小缩放级别。有效的缩放值是从 0 到支持的 <a href="https://developers.google.com/maps/documentation/javascript/maxzoom"&gt;最大缩放级别&lt;/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	瓦片叠加层的 zIndex。适用于 iOS 和 Android。	undefined

Marker

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

属性	类型	描述	默认值	Since
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

Polygon

对于 Web，所有 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

Circle

对于 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

Polyline

对于 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	此跨度的长度，以段数表示。

CameraConfig

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

支持"legacy"（传统）或"advanced"（高级）类型的标记。

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

枚举

MapType

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