Android
运行 ApiDemos 示例应用
如需运行 ApiDemos 示例应用,请参阅 GitHub 示例 (Java | Kotlin) 并查看 CloudBasedMapStylingDemoActivity
演示 (Java | Kotlin)。
您可以查找 Java 和 Kotlin 示例应用,了解如何通过云端设置 Android 地图的样式。
已知问题
将应用交付给客户后,您可以通过 Google Cloud 控制台更新具有地图 ID 的地图的自定义样式。新样式将在几小时后显示在您的应用中。
为了确保新的自定义样式能够立即显示以便进行测试,请清除测试设备中的应用数据。如需详细了解如何清除设备中的数据,请参阅 Android 帮助文章 - 释放存储空间。
请注意,设置方法可能因手机而异。如需了解详情,请与您的设备制造商联系。
iOS
运行 ApiDemos 示例应用
如需运行 ApiDemos 示例应用,请参阅 GitHub 示例 Google 地图示例应用并查看 CloudBasedMapStylingViewController
项目(适用于 Swift | Objective-C 的 GitHub 示例)。
可选的 Cloud 样式设置 CocoaPod 或 GitHub 演示
您不必从头开始,而可以试用我们的 Objective-C 示例应用,该应用演示了如何在云端设置 iOS 地图的样式。如需了解详情,请参阅 Objective-C 示例。
构建 Beta 版演示版应用
在 Xcode 中,按“compile”按钮进行构建,然后运行当前方案。
构建生成错误,提示您在 SDKDemoAPIKey.h
文件中输入 API 密钥。
如果您还没有 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 版示例”部分中的“地图自定义演示”。
点击设置地图样式,查看加载不同地图 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;
JavaScript
function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, }); } window.initMap = initMap;
试用示例
Maps Static API
地图 ID 是与特定地图样式或地图项相关联的标识符。在 Google Cloud Console 中配置地图样式,并将其与地图 ID 相关联。然后,当您在代码中引用地图 ID 时,相关联的地图样式便会显示在您的应用中。您后续进行的任何样式更新都会自动显示在您的应用中,无需客户进行任何更新。
如果您将云端地图样式设置与使用
style
参数自定义的现有地图搭配使用,请务必移除这些地图样式,以免与日后推出的功能发生冲突。若要向使用我们的某个 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" />