17370845950

Geolocation API 是浏览器原生地理定位接口，需用户授权且仅在 HTTPS 或 localhost 中可用；支持单次获取（getCurrentPosition）和持续监听（watchPosition），需处理兼容性、错误及隐私限制。

Geolocation API 是浏览器原生支持的获取用户地理位置的接口，不需要额外库，但需要用户授权，且只在安全上下文（HTTPS 或 localhost）中可用。

基本用法：获取一次当前位置

调用 navigator.geolocation.getCurrentPosition() 即可请求当前经纬度。它接受两个回调函数：成功时执行第一个，失败时执行第二个。

• 成功回调接收一个 position 对象，其中 position.coords.latitude 和 position.coords.longitude 是关键字段
• 失败回调接收一个 error 对象，error.code 可判断原因（如 1=用户拒绝、2=位置不可用、3=超时）
• 可选第三个参数是配置对象，比如 { enableHighAccuracy: true, timeout: 5000, maximumAge: 60000 }

监听位置变化：持续跟踪移动

用 navigator.geolocation.watchPosition() 替代单次获取，它返回一个唯一 ID，可用于后续停止监听。

• 每次位置更新（哪怕微小变动）都会触发成功回调
• 建议在不需要时主动调用 navigator.geolocation.clearWatch(watchId) 释放资源
• 注意：频繁更新会增加耗电，生产环境建议结合 maximumAge 和 timeout 控制精度与频率

处理常见错误和兼容性

不是所有浏览器或环境都支持 Geolocation，需做兜底判断。

• 先检查 'geolocation' in navigator，避免 TypeError
• 用户拒绝授权后，再次调用不会弹窗，需引导用户手动开启（例如显示设置提示）
• 部分安卓 WebView 或 iOS Safari 在非主文档上下文中可能受限，确保脚本在顶层页面运行
• 隐私模式下部分浏览器会直接返回错误，不要假设一定能拿到位置

简单实用示例（带错误友好提示）

复制到 HTTPS 页面即可运行：

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(
    (pos) => {
      const { latitude, longitude } = pos.coords;
      console.log(`纬度：${latitude}，经度：${longitude}`);
    },
    (err) => {
      const msg = {
        1: '您拒接了位置访问',
        2: '设备无法获取位置信息',
        3: '获取位置超时了'
      }[err.code] || '未知错误';
      alert('定位失败：' + msg);
    },
    { timeout: 10000, enableHighAccuracy: false }
  );
} else {
  alert('您的浏览器不支持地理位置');
}

基本上就这些。用好 Geolocation API 的关键是尊重用户选择、做好降级处理、别盲目追求高精度。