Google Maps Platform 提供云端地图样式设置功能,可让您轻松地使用 Google Cloud 控制台设置地图样式、自定义和管理地图,从而为用户提供自定义地图体验,并且无需在每次更改样式时更新应用的代码。
2020 年 9 月 15 日之前创建的样式不会显示 Google 地图增强后的自然地貌。若要在地图样式中使用 Google 地图增强后的自然地貌,您必须创建地图样式。
借助云端地图样式设置,您可以为使用 Google 地图的所有应用创建和修改地图样式,并且无需对代码进行任何更改,只要您拥有地图 ID 便可使用其关联的地图样式。所有样式更改都可以在 Cloud 控制台中完成,您无需具备任何编码技能。您可以更改众多地图元素(例如道路、建筑物、水体、地图注点和公共交通路线)的外观和颜色。
这些功能包括:
- 云端地图样式设置:您可以在 Cloud 控制台中使用地图 ID 和地图样式来管理动态或静态地图,并为其设置样式,而不需要在代码中使用 JSON 设置地图样式。
- 矢量地图:JavaScript 开发者可以选择在自己的 Web 应用中直接使用 maps.google.com 上提供的同一 WebGL 加速矢量地图。
- 商家地图注点过滤:可以根据需要移除五种商家地图注点,不让它们显示在地图上。
- 地图注点密度控制:可以调整地图注点在基本地图上的显示密度,以增加或减少默认显示的地图注点。
虽然云端地图样式设置适用于 Maps SDK for Android1、Maps SDK for iOS、JavaScript 和 Maps Static API,但部分功能不会在所有平台上显示。
准备工作
- 创建地图 ID
如需使用云端地图样式设置,您必须使用地图 ID 加载地图。 - 从硬编码样式中进行迁移
您可以添加地图 ID,以便在使用硬编码样式(如 JSON 或网址查询参数)自定义的现有地图上使用云端地图样式设置;但在此之前,我们建议您先移除这些硬编码样式,以免与日后推出的功能发生冲突。您可以将 JSON 样式导入到新的地图样式中。- 在 Android 应用代码中,更新
MapStyleOptions
- 在 iOS 应用代码中,更新
GMSMapStyle
类 - 在 JavaScript 中,移除
MapTypeStyle
样式 - 在 Maps Static 中,移除
style
参数
- 在 Android 应用代码中,更新
结算
如需使用云端地图样式设置,您需要拥有地图 ID。在 Maps SDK for Android、Maps SDK for iOS 和 JavaScript 上,使用地图 ID 会产生动态地图 SKU 费用。在 Maps Static API 中,使用地图 ID 会产生静态地图 SKU 费用。
示例
这是一个使用地图 ID 加载自定义样式地图的基本示例。在本例中,Maps JavaScript 会在地图加载时引用地图 ID 8e0a97af9386fef
,并自动应用当前与该地图 ID 相关联的地图样式。
TypeScript
function initMap(): void { new google.maps.Map( document.getElementById("map") as HTMLElement, { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, } as google.maps.MapOptions ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, }); } window.initMap = initMap;
试用示例
-
Android 精简模式不支持云端地图样式设置。 ↩