请按照以下步骤设置高级标记。
获取 API 密钥并启用 Maps JavaScript API
在使用高级标记之前,您需要有结算帐号的 Cloud 项目,并启用 Maps JavaScript API。如需了解详情,请参阅设置您的 Google Cloud 项目。
创建地图 ID
如要创建新的地图 ID,请按照云端地图样式设置一文中的步骤操作。将地图类型设置为 JavaScript,然后选择矢量或光栅选项。
更新地图初始化代码
这需要用到您刚刚创建的地图 ID。您可以在地图管理页面上找到该 ID。
在需要时从
async
函数内加载高级标记库:const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
在实例化地图时,通过
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. } });