自定义 3D 地图

您可以使用云端地图样式设置自定义 3D 底图的外观和风格。

借助云端地图样式设置，您可以控制向用户展示的地图的外观和风格。通过控制地图注点 (POI) 的密度、移除某些 POI 类别以及修改要素的填充或轮廓等功能，您可以打造适合用户的地图体验。

云端地图样式设置可在 Google Cloud 控制台中提供无需编写代码的编辑体验。在地图控制台中对样式所做的修改会自动显示在您的应用中。

以下示例展示了一张使用自定义样式的地图，该样式将休闲功能图标和文本的颜色更改为橙色：

async function initMap() {
    const { Map3DElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200 },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f',
        mode: 'HYBRID',
        gestureHandling: "COOPERATIVE"
    });
    document.body.append(map);
}
initMap();
index.js

概览

使用云端地图样式设置自定义 3D 地图的流程与自定义 2D 地图的流程相同：

1 创建地图 ID 创建地图 ID。 地图 ID 会传递给您的应用以处理样式。您将在后续步骤中将自定义样式与此地图 ID 相关联。
2 创建云端地图样式 您必须在此步骤中选择“3D 混合”并使用“浅色模式”。
3 将地图样式与地图相关联 将样式与您在第 1 步中创建的地图 ID 相关联
4 为您的应用添加地图 ID 使用 map-id 参数在代码中指定地图 ID。
5 发布地图 ID 请注意，发布后，对自定义样式的更改会自动纳入应用中。

如需深入了解如何创建地图样式，请参阅创建和使用地图样式。

限制

在 Maps JavaScript 中将云端地图样式设置与 3D 地图搭配使用时，需要注意以下限制：

  • 不支持深色模式。
  • 不支持启用地图 ID 的功能，例如数据驱动型样式。