云端地图样式设置

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 样式导入新的地图样式。
*升级 Maps SDK for Android
如需使用云端地图样式设置，您必须使用 18.0.0 版或更高版本的 Maps SDK for Android，并使用最新版的 Maps SDK for Android 渲染程序。

结算

如需使用云端地图样式设置，您需要拥有地图 ID。如果您在使用 Maps SDK for Android、Maps SDK for iOS 和 JavaScript 时使用地图 ID，系统会产生动态地图 SKU 费用。而如果您在使用 Maps Static API 时使用地图 ID，则会产生静态地图 SKU 费用。

示例

Android

运行 ApiDemos 示例应用

如需运行 ApiDemos 示例应用，请参阅 GitHub 示例 (Java | Kotlin) 并查看 CloudBasedMapStylingDemoActivity 演示 (Java | Kotlin)。

您可以查找 Java 和 Kotlin 示例应用，了解如何通过云端设置 Android 地图的样式。

已知问题

将应用交付给客户后，您可以通过 Google Cloud 控制台更新具有地图 ID 的地图的自定义样式。新样式将在几小时后显示在您的应用中。

为了确保新的自定义样式能够立即显示以进行测试，请清除测试设备中的应用数据。如需详细了解如何清除设备中的数据，请参阅 Android 帮助文章 - 释放存储空间。

请注意，设置方法可能因手机而异。如需了解详情，请与您的设备制造商联系。

iOS

运行 ApiDemos 示例应用

如需运行 ApiDemos 示例应用，请参阅 GitHub 示例 Google 地图示例应用并查看 CloudBasedMapStylingViewController 项目（适用于 Swift 的 GitHub 示例 | Objective-C）。

可选的 Cloud 样式设置 CocoaPod 或 GitHub 演示

除了从头开始设置，您还可以在此处试用我们的 Objective-C 示例应用，该应用演示了如何通过云端设置 iOS 地图的样式。

构建 Beta 版演示版应用

在 Xcode 中，按“compile”按钮进行构建，然后运行当前方案。 构建生成错误，提示您在 SDKDemoAPIKey.h 文件中输入 API 密钥。

如果您还没有 API 密钥，请按照这些说明在 Cloud 控制台上设置一个项目，并获取 API 密钥。在 Cloud 控制台中配置密钥时，您可以指定应用的软件包标识符，以确保只有您的应用可以使用该密钥。SDK 示例应用的默认软件包标识符为 com.example.GoogleMapsDemos。

修改 SDKDemoAPIKey.h 文件并将您的 API 密钥粘贴到 kAPIKey 常量的定义中：

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

如果 Xcode 提示您解锁 SDKDemoAPIKey.h 文件进行修改，请选择 Unlock。

移除以下行：

```
#error Register for API Key and insert here.
```

构建并运行项目。

云端地图样式设置地图演示

CloudStyling 演示版展示了如何使用 Google Cloud 控制台中的样式集来设置地图样式。

演示应用启动时，点击列表顶部“Beta Samples”部分中的“地图自定义演示”。

点击样式地图，查看加载不同地图 ID 的效果。

您还可以尝试添加自己的样式（“样式地图”>“添加新的地图 ID”），然后会看到地图随自定义样式化地图而更新。

JavaScript

这是一个使用地图 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;
index.ts

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js
查看示例

试用示例

Maps Static API

地图 ID 是与特定地图样式或地图项相关联的标识符。在 Google Cloud Console 中配置地图样式，并将其与地图 ID 相关联。然后，当您在代码中引用地图 ID 时，相关联的地图样式便会显示在您的应用中。您后续进行的任何样式更新都会自动显示在您的应用中，无需客户进行任何更新。

  1. 如果您对使用 style 参数自定义的现有地图使用了云端地图样式设置，请务必移除这些地图样式，以免与未来的功能发生冲突。

  2. 若要向使用我们某个 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=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

  1. Android 精简模式不支持云端地图样式设置。 ↩