开始使用

请按照以下步骤设置高级标记。

获取 API 密钥并启用 Maps JavaScript API

在使用高级标记之前，您需要有结算帐号的 Cloud 项目，并启用 Maps JavaScript API。如需了解详情，请参阅设置您的 Google Cloud 项目。

获取 API 密钥

创建地图 ID

如要创建新的地图 ID，请按照云端地图样式设置一文中的步骤操作。将地图类型设置为 JavaScript，然后选择矢量或光栅选项。

创建矢量地图 ID

更新地图初始化代码

这需要用到您刚刚创建的地图 ID。您可以在地图管理页面上找到该 ID。

  1. 加载 Maps JavaScript API。

  2. 在需要时从 async 函数内加载高级标记库：

    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  3. 在实例化地图时，通过 mapId 属性提供地图 ID。这可以是您提供的地图 ID，也可以是 DEMO_MAP_ID。

    const map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'YOUR_MAP_ID'
});

检查地图功能（可选）

高级标记需要地图 ID。如果缺少地图 ID，或传递的地图 ID 无效，则无法加载高级标记。作为问题排查步骤，您可以添加一个 mapcapabilities_changed 监听器来订阅地图功能更改。这将指明是否满足以下条件：

  • 正在使用有效的地图 ID。
  • 如果使用了需要矢量图的地图项，地图 ID 就会与矢量地图相关联。

使用地图功能是可选操作，建议仅将其用于测试、问题排查或运行时回退。

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

后续步骤

创建默认的高级标记