自定义 3D 地图

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

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

云端地图样式设置在 Google Cloud 控制台中提供了无代码编辑体验。您创建的每个自定义样式都与一个地图 ID 相关联；在地图控制台中对样式所做的修改会自动显示在您的应用中。

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

async function init() {
    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', // Styles are associated with map IDs.
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

概览

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

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

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

动态更新地图 ID

您可以在实例化地图后动态更新 mapId 属性。 这样，您就可以应用不同的云端地图样式，而无需重新创建整个 Map3DElement 实例。

如需更新地图 ID，请在 Map3DElement 实例上设置 mapId 属性：

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

由于 mapId 属性会反映回 HTML 属性，因此您还可以通过修改该属性来动态更新它：

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

限制

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

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