跳到主要内容
版本：v7

@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()">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;

您可能需要在 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()">Create Map</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()">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>
ParamType
optionsCreateMapArgs
callbackMapListenerCallback<MapReadyCallbackData>

返回： Promise<GoogleMap>

enableTouch()​

enableTouch() => Promise<void>

disableTouch()​

disableTouch() => Promise<void>

enableClustering(...)​

enableClustering(minClusterSize?: number | undefined) => Promise<void>
ParamType描述
minClusterSizenumber可以聚集在一起的最小标记数量。默认是 4 个标记。

disableClustering()​

disableClustering() => Promise<void>

addTileOverlay(...)​

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

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

removeTileOverlay(...)​

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

addMarker(...)​

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

返回： Promise<string>

addMarkers(...)​

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

返回： Promise<string[]>

removeMarker(...)​

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

removeMarkers(...)​

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

addPolygons(...)​

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

返回： Promise<string[]>

removePolygons(...)​

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

addCircles(...)​

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

返回： Promise<string[]>

removeCircles(...)​

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

addPolylines(...)​

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

返回： Promise<string[]>

removePolylines(...)​

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

destroy()​

destroy() => Promise<void>

setCamera(...)​

setCamera(config: CameraConfig) => Promise<void>
ParamType
configCameraConfig

getMapType()​

getMapType() => Promise<MapType>

获取当前地图类型。

返回： Promise<MapType>

setMapType(...)​

setMapType(mapType: MapType) => Promise<void>
ParamType
mapTypeMapType

enableIndoorMaps(...)​

enableIndoorMaps(enabled: boolean) => Promise<void>
ParamType
enabledboolean

enableTrafficLayer(...)​

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

enableAccessibilityElements(...)​

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

enableCurrentLocation(...)​

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

setPadding(...)​

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

getMapBounds()​

getMapBounds() => Promise<LatLngBounds>

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

返回： Promise<LatLngBounds>

fitBounds(...)​

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

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

ParamType描述
boundsLatLngBounds要适应视口的边界。
paddingnumber可选的内边距，以像素为单位应用。边界将适应在移除内边距后剩余的地图部分。

setOnBoundsChangedListener(...)​

setOnBoundsChangedListener(callback?: MapListenerCallback<CameraIdleCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<CameraIdleCallbackData>

setOnCameraIdleListener(...)​

setOnCameraIdleListener(callback?: MapListenerCallback<CameraIdleCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<CameraIdleCallbackData>

setOnCameraMoveStartedListener(...)​

setOnCameraMoveStartedListener(callback?: MapListenerCallback<CameraMoveStartedCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<CameraMoveStartedCallbackData>

setOnClusterClickListener(...)​

setOnClusterClickListener(callback?: MapListenerCallback<ClusterClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<ClusterClickCallbackData>

setOnClusterInfoWindowClickListener(...)​

setOnClusterInfoWindowClickListener(callback?: MapListenerCallback<ClusterClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<ClusterClickCallbackData>

setOnInfoWindowClickListener(...)​

setOnInfoWindowClickListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<MarkerClickCallbackData>

setOnMapClickListener(...)​

setOnMapClickListener(callback?: MapListenerCallback<MapClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<MapClickCallbackData>

setOnMarkerClickListener(...)​

setOnMarkerClickListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<MarkerClickCallbackData>

setOnPolygonClickListener(...)​

setOnPolygonClickListener(callback?: MapListenerCallback<PolygonClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<PolygonClickCallbackData>

setOnCircleClickListener(...)​

setOnCircleClickListener(callback?: MapListenerCallback<CircleClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<CircleClickCallbackData>

setOnPolylineClickListener(...)​

setOnPolylineClickListener(callback?: MapListenerCallback<PolylineCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<PolylineCallbackData>

setOnMarkerDragStartListener(...)​

setOnMarkerDragStartListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<MarkerClickCallbackData>

setOnMarkerDragListener(...)​

setOnMarkerDragListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<MarkerClickCallbackData>

setOnMarkerDragEndListener(...)​

setOnMarkerDragEndListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<MarkerClickCallbackData>

setOnMyLocationButtonClickListener(...)​

setOnMyLocationButtonClickListener(callback?: MapListenerCallback<MyLocationButtonClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<MyLocationButtonClickCallbackData>

setOnMyLocationClickListener(...)​

setOnMyLocationClickListener(callback?: MapListenerCallback<MapClickCallbackData> | undefined) => Promise<void>
ParamType
callbackMapListenerCallback<MapClickCallbackData>

接口​

CreateMapArgs​

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

属性类型描述默认值
idstring地图实例的唯一标识符。
apiKeystringGoogle Maps SDK API 密钥。
configGoogleMapConfig地图的初始配置设置。
elementHTMLElementGoogle Map 视图将挂载到的 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 坐标位置。
centerLatLng相机指向的地球上的默认位置。
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
maxZoomnumber | null地图上显示的最大缩放级别。如果省略或设置为 <code>null</code>，则使用当前地图类型的最大缩放。有效的缩放值是从零到支持的 <a href="https://developers.google.com/maps/documentation/javascript/maxzoom"&gt;最大缩放级别&lt;/a> 的数字。
minZoomnumber | null地图上显示的最小缩放级别。如果省略或设置为 <code>null</code>，则使用当前地图类型的最小缩放。有效的缩放值是从零到支持的 <a href="https://developers.google.com/maps/documentation/javascript/maxzoom"&gt;最大缩放级别&lt;/a> 的数字。
mapTypeIdstring | null初始地图 mapTypeId。默认为 <code>ROADMAP</code>。
headingnumber | null航拍图像的朝向，以从正北方向顺时针测量的度数表示。朝向会吸附到有可用图像的最近角度。
restrictionMapRestriction | null定义限制用户可访问地图区域的边界。设置后，用户只能在相机视图保持在边界限制内时进行平移和缩放。

LatLng​

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

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

MapReadyCallbackData​

属性类型
mapIdstring

TileOverlay​

瓦片叠加层是放置在特定缩放级别地图顶部的图像。可在 iOS、Android 和 Web 上使用。

属性类型描述默认值
urlstring表示瓦片 URL 的字符串。应包含 {x}、{y} 和 {z}，以便它们可以被实际的 x、y 和缩放值替换。可在 iOS、Android 和 Web 上使用。
opacitynumber瓦片叠加层的不透明度，介于 0（完全透明）和 1（包含）之间。可在 iOS、Android 和 Web 上使用。undefined
visibleboolean控制此瓦片叠加层是否应可见。仅适用于 Android。undefined
zIndexnumber瓦片叠加层的 zIndex。可在 iOS 和 Android 上使用。undefined

Marker​

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

属性类型描述默认值自版本
coordinateLatLngMarker 位置。
opacitynumber设置标记的不透明度，介于 0（完全透明）和 1（包含）之间。1
titlestring标题，叠加层的简短描述。
snippetstring摘要文本，选中时显示在信息窗口标题下方。
isFlatboolean控制此标记应平贴在地球表面还是面向相机的广告牌。false
iconUrlstring要渲染的标记图标的路径。可以是相对于 Web 应用公共目录的路径，或远程标记图标的 https URL。原生平台不支持 SVG。4.2.0
iconSizeSize控制 iconUrl 中设置的标记图像的缩放大小。4.2.0
iconOriginPoint图像在精灵图中的位置（如果有）。默认情况下，原点位于图像的左上角。4.2.0
iconAnchorPoint将图像锚定到地图上标记位置的对应位置。默认情况下，锚点位于图像底部的中心点。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​

属性类型
xnumber
ynumber

Polygon​

在 Web 上，所有 javascript Polygon 选项都可用，因为 Polygon 扩展了 google.maps.PolygonOptions。 在 iOS 和 Android 上，只有 Polygon 上声明的配置选项可用。

属性类型描述
pathsany[] | MVCArray<any>表示闭合环的有序坐标序列。与折线不同，多边形可能包含一个或多个路径。因此，paths 属性可以指定一个或多个 <code>LatLng</code> 坐标数组。路径会自动闭合；不要重复路径的第一个顶点作为最后一个顶点。简单多边形可以使用单个 <code>LatLng</code> 数组定义。更复杂的多边形可以指定数组的数组。任何简单数组都会转换为 <code><a href="#MVCArray">MVCArray</a></code>。从 <code>MVCArray</code> 中插入或删除 <code>LatLng</code> 将自动更新地图上的多边形。
strokeColorstring描边颜色。支持所有 CSS3 颜色，除了扩展命名颜色。
strokeOpacitynumber描边不透明度，介于 0.0 和 1.0 之间。
strokeWeightnumber描边宽度，以像素为单位。
fillColorstring填充颜色。支持所有 CSS3 颜色，除了扩展命名颜色。
fillOpacitynumber填充不透明度，介于 0.0 和 1.0 之间。
geodesicboolean当 <code>true</code> 时，多边形的边被解释为大圆，将遵循地球的曲率。当 <code>false</code> 时，多边形的边在屏幕空间中被渲染为直线。请注意，大圆多边形的形状在拖动时可能会发生变化，因为尺寸相对于地球表面保持不变。
clickableboolean指示此 <code>Polygon</code> 是否处理鼠标事件。
titlestring标题，叠加层的简短描述。某些叠加层（如标记）会在地图上显示标题。标题也是默认的无障碍文本。仅适用于 iOS。
tagstring

Circle​

在 Web 上，所有 javascript Circle 选项都可用，因为 Circle 扩展了 google.maps.CircleOptions。 在 iOS 和 Android 上，只有 Circle 上声明的配置选项可用。

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

Polyline​

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

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

StyleSpan​

描述折线某个区域的样式。

属性类型描述
colorstring描边颜色。支持所有 CSS3 颜色，除了扩展命名颜色。
segmentsnumber此跨度的长度，以线段数量为单位。

CameraConfig​

Google Map 相机的配置属性。

属性类型描述默认值
coordinateLatLng相机指向的地球上的位置。
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

Marker​

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

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

枚举​

MapType​

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

目录

编辑此页