Vue项目迁移至AdvancedMarkerElement后谷歌地图标记不显示

核心排查点与解决步骤 #

1. 确认map参数为正确的谷歌地图实例 #

创建AdvancedMarkerElement时，必须传入初始化后的谷歌地图实例对象，而非地图DOM元素。错误传入DOM会导致标记无法被地图引擎管理，出现固定位置的问题。

正确示例：

// 初始化地图时保存实例
async initMap() {
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  
  // 获取地图DOM元素
  const mapDom = document.getElementById("map");
  
  // 初始化地图并保存实例
  this.map = new Map(mapDom, {
    center: { lat: 39.9042, lng: 116.4074 },
    zoom: 12,
    mapId: "YOUR_VALID_MAP_ID", // 确保MapID在谷歌云控制台已配置
  });

  // 点击地图创建标记，传入正确的map实例
  this.map.addListener("click", (e) => {
    const marker = new AdvancedMarkerElement({
      map: this.map, // 此处必须为上面的map实例
      position: e.latLng,
    });
    this.markers.push(marker);
  });
}

2. 禁止手动将标记添加到DOM #

AdvancedMarkerElement由谷歌地图API自动管理挂载与位置同步，手动调用appendChild会绕过地图引擎的逻辑，导致标记固定在左上角且不跟随地图移动。只需在创建标记时传入map参数，无需额外DOM操作。

3. 验证Map ID的有效性 #

尽管地图已显示为矢量渲染类型，仍需确认：

• 谷歌云控制台中，你的API密钥所属项目已创建有效的Map ID
• Map ID的类型为矢量地图（AdvancedMarkerElement仅支持矢量渲染模式）
• API密钥已启用Maps JavaScript API和Marker Library

4. 排查标记样式遮挡问题 #

若标记仍不显示，可尝试自定义标记内容以确保尺寸可见：

const markerContent = document.createElement("div");
markerContent.style.width = "32px";
markerContent.style.height = "32px";
markerContent.style.backgroundColor = "#ff0000";
markerContent.style.borderRadius = "50%";

const marker = new AdvancedMarkerElement({
  map: this.map,
  position: e.latLng,
  content: markerContent,
});

额外注意事项 #

• 确保@googlemaps/js-api-loader的版本为最新，避免API兼容性问题
• 检查控制台是否有隐藏的警告（如Map ID无效、API权限不足等）

内容的提问来源于stack exchange，提问作者Alejandro Barredo Arrieta