javascript怎样获取用户地理位置？【教程】

Geolocation API 使用前须检查权限与环境：先确认 navigator.geolocation 存在，再用 permissions.query 预判状态；调用 getCurrentPosition 时必须设置 timeout、maximumAge 和 enableHighAccuracy；watchPosition 需手动 clearWatch；仅 HTTPS 或 localhost 下可用。

Geolocation API 调用前必须确认用户授权

浏览器不会自动给你位置，navigator.geolocation 一调就弹权限框。用户点“拒绝”或“阻止”，后续所有方法都会进 error 回调，且没有重试机制——除非用户手动去浏览器设置里改回来。

实际开发中，别一上来就 getCurrentPosition，先检查 navigator.geolocation 是否存在，再用 permissions.query 预判状态：

if ("geolocation" in navigator) {
  navigator.permissions.query({ name: "geolocation" })
    .then(result => {
      if (result.state === "granted") {
        // 可直接调用
      } else if (result.state === "prompt") {
        // 第一次调用时会弹窗
      } else if (result.state === "denied") {
        // 已被拒绝，提示用户去设置页开启
      }
    });
}

getCurrentPosition 的 timeout 和 maximumAge 容易被忽略

默认不设 timeout，某些设备（尤其低端安卓 WebView）可能卡住几秒甚至十几秒才报错；不设 maximumAge，则每次都是全新定位，耗电高、响应慢。

• timeout: 5000 —— 超过 5 秒没结果就走 error 回调
• maximumAge: 60000 —— 允许复用 1 分钟内已获取的位置（适合静止场景）
• enableHighAccuracy: true —— 强制用 GPS（iOS 上可能被忽略，安卓部分机型需额外权限）

错误写法：navigator.geolocation.getCurrentPosition(success, error)；推荐写法：

navigator.geolocation.getCurrentPosition(
  success,
  error,
  { timeout: 5000, maximumAge: 60000, enableHighAccuracy: false }
);

watchPosition 返回的 id 必须手动清理

和 setTimeout 类似，watchPosition 是持续监听，返回一个数字 id，不调 clearWatch 就一直跑着，后台也耗电。尤其在 SPA 页面跳转、组件卸载时容易漏掉。

常见坑：

• React 中没在 useEffect 清理函数里调 navigator.geolocation.clearWatch(watchId)
• Vue 组件 be

  

  foreUnmount 没处理
• 多次调用 watchPosition 却只记最后一个 id，导致旧监听无法清除

HTTPS 是硬性前提，localhost 除外

Chrome、Firefox、Edge 等现代浏览器强制要求：只有 HTTPS 或 localhost 下才能启用 geolocation。HTTP 页面即使加了 http://127.0.0.1 也不行，必须是 https:// 或 http://localhost。

本地开发调试时，如果用 file:// 协议打开 HTML 文件，navigator.geolocation 直接为 undefined；用 python -m http.server 启服务仍不行——得上 HTTPS 或切回 localhost。

生产环境部署后，务必确认证书有效，自签名证书也会被拒绝。