开始

请选择平台: Android iOS JavaScript

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

获取 API 密钥并启用 Maps JavaScript API

在使用高级标记之前,您需要一个拥有结算账号并启用了 Maps JavaScript API 的 Cloud 项目。如需了解详情,请参阅设置您的 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 可以是您提供的地图 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,则无法加载高级标记。为便于排查问题,您可以添加一个 mapcapabilities_changed 监听器来订阅地图功能更改。使用地图功能是可选操作,建议仅将其用于测试、问题排查或运行时回退。

// 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.
  }
});

后续步骤

创建默认的高级标记