如何为HTML5 Geolocation添加高精度模式与watchPosition实现GPS实时更新？

没问题，我来帮你改造代码，实现高精度定位和实时位置更新的功能！下面一步步给你拆解怎么做：

1. 开启高精度模式 #

HTML5 Geolocation的高精度模式是通过PositionOptions配置对象来开启的，核心是设置enableHighAccuracy: true。这个参数会让设备优先使用GPS（如果可用）来获取更精准的位置，不过可能会消耗更多电量、定位时间也稍长。

你还可以搭配另外两个参数优化体验：

• timeout: 定位请求的超时时间（毫秒），超过这个时间就会触发错误回调
• maximumAge: 允许使用缓存位置的最长时间（毫秒），设为0表示每次都获取全新位置

2. 用watchPosition替换getCurrentPosition #

getCurrentPosition只会获取一次位置，而watchPosition会持续监听用户的位置变化，每次位置更新时都会触发回调函数——这正是你要的实时更新效果。它的用法和getCurrentPosition几乎一致，只是会返回一个监听ID，方便后续停止监听。

3. 完整代码示例 #

结合你的现有Google Maps代码，改造后的完整版本如下：

// 先保存监听ID，方便后续停止监听
let watchId;

if (navigator.geolocation) {
  // 配置高精度定位选项
  const positionOptions = {
    enableHighAccuracy: true, // 开启高精度模式
    timeout: 10000, // 10秒超时
    maximumAge: 0 // 不使用缓存位置
  };

  // 用watchPosition替代getCurrentPosition，实时监听位置变化
  watchId = navigator.geolocation.watchPosition(
    // 位置获取成功的回调
    function(position) {
      const latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      marker.setPosition(latlng);
      map.setCenter(latlng);
      console.log("位置已更新：", latlng);
    },
    // 定位失败的错误处理（很重要，不能忽略）
    function(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;
      }
    },
    positionOptions // 传入高精度配置
  );
} else {
  alert("你的浏览器不支持Geolocation功能");
}

4. 额外提示 #

• 停止监听：当你不需要再实时更新位置时（比如用户关闭页面、切换到其他功能），记得调用navigator.geolocation.clearWatch(watchId)来停止监听，避免不必要的资源消耗。
• 电量考虑：高精度模式会增加设备电量消耗，如果你的应用不需要极致精准，可以根据场景调整enableHighAccuracy，或者给maximumAge设置一个合理的值来复用缓存位置。

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