谷歌地图非硬编码经纬度时标注点消失问题求助

错误原因 #

• initMap是谷歌地图SDK加载完成后的回调函数，官方调用该函数时不会传入定位position参数，原代码直接读取position.coords会抛出未定义错误，阻塞后续逻辑执行。
• navigator.geolocation.getCurrentPosition是异步API，原代码将坐标读取、标记生成逻辑写在异步调用外，执行时定位请求还未返回结果，无法拿到有效坐标值。
• 原代码给getCurrentPosition传入了showPosition回调，但没有定义该函数，定位成功后会触发未定义函数报错。

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Simple Map</title>
  <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
      height: 500px;
      width: 100%;
    }
  </style>
</head>
<body>
<div id="map"></div>

<script>
  let map;
  function initMap() {
    // 初始化默认地图
    const defaultLocation = {lat: 51.165691, lng: 10.451526};
    map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: defaultLocation
    });
    // 发起定位请求
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
      alert("当前浏览器不支持定位功能");
    }
  }
  // 定位成功回调：生成位置标记
  function showPosition(position) {
    const userLocation = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    new google.maps.Marker({
      position: userLocation,
      map: map
    });
    // 可选：将地图中心移动到用户定位位置
    map.setCenter(userLocation);
    map.setZoom(12);
  }
  // 定位失败回调：提示错误信息方便排查
  function showError(error) {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        alert("用户拒绝了定位权限请求");
        break;
      case error.POSITION_UNAVAILABLE:
        alert("位置信息不可用");
        break;
      case error.TIMEOUT:
        alert("定位请求超时");
        break;
      case error.UNKNOWN_ERROR:
        alert("定位发生未知错误");
        break;
    }
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFlvIBD_3jTrQgDAyj9RMLOdR9cqYZoco&callback=initMap"></script>
</body>
</html>

额外注意事项 #

• 定位功能需要用户手动授权，若用户拒绝授权会触发错误回调，不会生成标记，建议保留错误提示逻辑方便排查问题。
• 谷歌地图服务需要在可正常访问Google服务的网络环境下使用，否则地图本身也无法正常加载。

内容的提问来源于stack exchange，提问作者Frevelman