地图 ID 是表示单个 Google 地图实例的唯一标识符。您可以使用地图 ID 在网站和应用中启用地图项,或管理或设置地图样式。您可以在 Google Cloud 控制台项目的地图管理页面中,为所需的每个平台(JavaScript、Android、iOS 或静态地图)创建地图 ID。
地图 ID 的用途
使用地图 ID 启用地图项和样式。以下是一些关于如何使用地图 ID 的示例。如需查看完整列表,请参阅使用地图 ID 的功能:
云端地图样式设置:将地图 ID 与地图样式相关联,以便使用 Google Cloud 控制台设置地图样式、自定义和管理地图。适用于所有平台:JavaScript、Android、iOS 和 Maps Static API。
矢量地图:使用地图 ID 使用由基于矢量的图块组成的地图,这些图块会在加载时使用 WebGL 在客户端绘制。适用于 JavaScript。
高级标记:使用地图 ID 启用高级标记。适用于 JavaScript、Android 和 iOS。
云端地图样式设置示例
如需使用云端地图样式设置为网站和 Android 应用中的地图设置样式,请按以下步骤操作:
为您使用的每个平台创建地图 ID。例如,创建一个 JavaScript 地图 ID 和一个 Android 地图 ID。如需了解详情,请参阅创建地图 ID。
在 Google Cloud 控制台中配置地图样式。如需了解详情,请参阅云端地图样式设置。
在 Google Cloud 控制台中将您的两个地图 ID 与地图样式相关联。如需了解详情,请参阅将地图 ID 与您的样式相关联。
在网站 JavaScript 和 Android 应用代码中引用地图 ID。如需了解详情,请参阅将地图 ID 添加到应用。
然后,与您的地图 ID 关联的地图样式就会显示在您的网站和 Android 应用中。您可以在 Cloud 控制台中更新地图样式,所做更改会自动显示在这两个位置,而无需客户进行任何应用更新。
使用地图 ID 的功能
下表显示了使用地图 ID 的 Google Maps Platform 地图项和 API:
功能或 API | 使用地图 ID 来实现这些目标 |
---|---|
高级标记 | 启用高级标记。您无需创建地图 ID,而可以使用演示版地图 ID“DEMO_MAP_ID”。 |
边界的数据驱动型样式 | 将地图 ID 与一组边界和样式相关联,以便根据边界设置地图样式。 |
数据集的数据驱动型样式 | 将地图 ID 与一组数据和样式相关联,以便根据数据集设置地图样式。 |
Flutter | 设置 Flutter 应用中使用的 Google 地图的样式。 |
Maps Embed API | 指定要嵌入到网页中的地图并设置其样式。 |
Maps JavaScript API | 为要在网页上显示的地图设置样式。 |
Maps SDK for Android | 为要在 Android 应用中显示的地图设置样式。1 |
Maps SDK for iOS | 为要在 iOS 应用中显示的地图设置样式。1 |
Maps Static API | 指定地图并为其设置样式,以便将其渲染为静态图片。 |
移动解决方案 | 使用适用于 Android 和 iOS 的 Maps JavaScript API 和 SDK 为移动解决方案中的地图设置样式。1 |
WebGL(矢量地图) | 使用 JavaScript 矢量地图 ID 启用 WebGL 功能。 |
1 在 Maps SDK for Android 或 Maps SDK for iOS 中使用地图 ID 会触发地图加载,该加载需支付动态地图 SKU 的费用。
如何创建和使用地图 ID
地图 ID 是表示单个 Google 地图实例的唯一标识符。您可以在 Cloud 控制台中创建地图 ID 并更新与地图 ID 相关联的地图样式。
所需权限
如需在项目中创建或管理任何地图 ID,您必须在项目的 Cloud 控制台 IAM 页面上使用具有适当角色级权限(“编辑者”或“所有者”)的主账号。如需了解详情,请参阅 IAM 基本角色和预定义角色参考文档。
创建地图 ID
您可以随时在 Cloud 控制台中创建地图 ID 并更新与之关联的样式。
如需创建地图 ID,请按以下步骤操作:
登录并打开具有所需权限的 Cloud 控制台项目。
在 Cloud 控制台中,前往“地图管理”页面。
选择创建地图 ID。
在创建新的地图 ID 页面上,执行以下操作:
- 在名称中,为地图 ID 指定名称。
- 可选:对于说明,请说明地图 ID 的用途。
- 对于地图类型,选择您计划在哪个平台上使用地图 ID。如果您选择了 JavaScript,还需要选择光栅(默认)或矢量地图类型。如需详细了解矢量地图,请参阅矢量地图。
- 选择保存,系统会显示您的新地图 ID。
将地图 ID 与地图样式相关联
以下说明假定您的项目中已有至少一个地图样式。如果您没有任何地图样式,请参阅云端地图样式设置,然后选择您的平台,了解如何创建地图样式。
- 在 Cloud 控制台中,前往“地图管理”页面。
- 从表格中选择一个现有的地图 ID。
- 在关联的地图样式下,选择一个地图样式。
选择保存。
为您的应用添加地图 ID
Android
您可以使用 MapView
类(或以编程方式使用 GoogleMapOptions
类)通过 activity 布局文件中的 <fragment>
元素添加地图 ID。
例如,假设您创建了地图 ID,它作为一个名为 map_id
的字符串值存储在 res/values/strings.xml
中:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>
对于通过 activity 布局文件中的 <fragment>
元素添加的地图,所有应具有自定义样式的地图 fragment 都必须在 map:mapId
属性中指定地图 ID:
<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
map:name="com.google.android.gms.maps.SupportMapFragment"
…
map:mapId="@string/map_id" />
您还可以使用 MapView
类的 map:mapId
属性来指定地图 ID:
<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
....
map:mapId="@string/map_id" />
如需以编程方式指定地图 ID,请使用 GoogleMapOptions
类将其传递给 MapFragment
实例:
Java
MapFragment mapFragment = MapFragment.newInstance(
new GoogleMapOptions()
.mapId(getResources().getString(R.string.map_id)));
Kotlin
val mapFragment = MapFragment.newInstance(
GoogleMapOptions()
.mapId(resources.getString(R.string.map_id))
)
在 Android Studio 中,像往常一样构建并运行应用。第一步中配置的自定义样式会应用于具有指定地图 ID 的所有地图。
iOS
如需使用地图 ID 实例化地图,请执行以下操作:
- 使用 Cloud 控制台中的地图 ID 字符串创建
GMSMapID
。 - 创建一个
GMSMapView
,指定您刚刚创建的地图 ID。
Swift
let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView
Objective-C
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
longitude:-122.336471
zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;
如果您使用的是自己的地图 ID,则可以随时在 Cloud 控制台中设置地图 ID 以使用新样式,该样式将在大约 6 小时内自动反映在您的地图视图中,供您和用户使用。
如果您想立即查看更改,可以关闭应用并重新启动应用,具体方法是退出应用,从最近用过的应用列表中强制退出应用,然后重新打开应用。然后,系统会显示更新后的地图。
JavaScript
如需在应用代码中创建具有地图 ID 的地图,请执行以下操作:
如果您已使用嵌入的 JSON 代码自定义地图,请从
MapOptions
对象中移除styles
属性;否则,请跳过此步骤。使用
mapId
属性向地图添加地图 ID。例如:
map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'MAP_ID' });
静态地图
如需向使用某个 Web 服务 API 的新地图或现有地图添加地图 ID,请附加 map_id
网址参数并将其设置为您的地图 ID。此示例展示了如何使用 Maps Static API 将地图 ID 添加到地图中。
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=MAP_ID&signature=YOUR_SIGNATURE" />