如何在Google Maps上为设备当前位置设置Advanced Marker

核心问题排查与修复 #

你的代码逻辑本身没问题，运行后无显示大概率是以下原因：

1. 地图容器缺少尺寸样式 #

Google Maps需要地图容器有明确的宽高才能渲染，给你的#map元素添加CSS样式：

#map {
  height: 100vh;
  width: 100%;
}

如果嵌入在其他容器中，也要给父容器设置合适的尺寸。

2. 确认API配置与库加载 #

• 检查Google Maps API密钥是否正确配置，需确保密钥启用了「Maps JavaScript API」和「Marker Library」权限
• Advanced Marker Element基于Web Components，现代浏览器均支持，无需额外兼容层，但要避免在受限环境（如无权限的iframe）中使用

3. 调试错误信息 #

打开浏览器控制台（F12）查看报错：

• API密钥问题会弹出明确的权限错误提示
• 容器尺寸问题会输出地图容器不可见的警告

修正后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <title>Geolocation with Advanced Marker</title>
  <style>
    #map {
      height: 100vh;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    let map, infoWindow;

    async function initMap() {
        const { Map } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

        map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: -33.9778791, lng: 22.4188544 },
            zoom: 15,
            disableDefaultUI: true
        });

        infoWindow = new google.maps.InfoWindow();

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };

                    map.setCenter(pos);

                    const marker = new AdvancedMarkerElement({
                        map: map,
                        position: pos,
                    });

                    infoWindow.setPosition(pos);
                    infoWindow.setContent("Location found.");
                    infoWindow.open(map, marker);
                },
                () => {
                    handleLocationError(true, infoWindow, map.getCenter());
                }
            );
        } else {
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(
            browserHasGeolocation
                ? "Error: The Geolocation service failed."
                : "Error: Your browser doesn't support geolocation."
        );
        infoWindow.open(map);
    }

    window.initMap = initMap;
  </script>
  <script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>

替换YOUR_API_KEY为你自己的Google Maps API密钥即可。

验证步骤 #

• 先单独测试地图渲染：注释地理定位代码，硬编码位置创建Advanced Marker，确认地图和标记正常显示
• 再单独测试地理定位：注释Marker创建代码，确认能获取位置并居中地图
• 逐步合并代码，排查每一步的运行状态

内容的提问来源于stack exchange，提问作者Clint William Theron