Vue3中如何显示Google Maps的AdvancedMarkerElement

排查及修复点： #

• 标记位置不在当前地图视野
  你的代码里地图中心设置为{ lat: 9.3622369, lng: 3.3455534 }，但标记位置是{ lat: -25.344, lng: 131.031 }，两者跨越大半个地球，当前缩放级别7下完全看不到标记。可以：

  • 将标记位置改为地图中心附近，快速验证显示效果；
  • 调用map.value.panTo(标记位置)，让地图自动移动到标记所在区域。

• 未保留标记实例引用
  AdvancedMarkerElement基于Custom Element实现，若直接new后不保存引用，可能被浏览器垃圾回收或Vue响应式系统处理掉。需用ref变量保存标记实例。

• 无效mapId导致渲染失败
  AdvancedMarkerElement依赖Map ID关联的地图样式，若你的mapId未在Google Cloud控制台正确配置，会导致标记无法渲染。可先注释掉mapId配置，使用默认样式验证。

• 地图容器缺少宽高样式
  必须给地图容器设置明确的宽高（如width:100%;height:500px），否则地图本身无法显示。

修正后的完整代码 #

<script>
import { Loader } from "@googlemaps/js-api-loader";
import { onMounted, ref } from "vue";

const GOOGLE_MAPS_API_KEY = "my_key";

export default {
  setup() {
    const loader = new Loader({
      apiKey: GOOGLE_MAPS_API_KEY,
      version: 'beta',
    });

    const mapDiv = ref(null);
    const map = ref(null);
    const marker = ref(null); // 保存标记实例，避免被回收

    onMounted(async () => {
      const { Map } = await loader.importLibrary("maps");
      const { AdvancedMarkerElement } = await loader.importLibrary("marker");

      map.value = new Map(mapDiv.value, {
        center: { lat: 9.3622369, lng: 3.3455534 },
        zoom: 7,
        // mapId:"map_id" // 先注释，确认是否为该问题
      });

      // 创建标记并保存引用
      marker.value = new AdvancedMarkerElement({
        map: map.value,
        position: { lat: 9.3622369, lng: 3.3455534 }, // 与地图中心一致，确保可见
        title: "Uluru",
      });

      // 若要使用原标记位置，打开下面一行
      // map.value.panTo({ lat: -25.344, lng: 131.031 });
    });
    return { mapDiv };
  },
};
</script>

<template>
  <div ref="mapDiv" style="width: 100%; height: 500px;"></div>
</template>

内容的提问来源于stack exchange，提问作者Rostand KPO-N-MEY