Geolocation API 使用前须检查权限状态并确保 HTTPS;调用 getCurrentPosition 需处理 success/error 回调,注意 error.code 含义;高精度与缓存选项需权衡;持续定位应使用 watchPosition 并及时 clearWatch;坐标精度差异大,需 fallback 方案。

Geolocation API 调用前必须检查用户授权状态
浏览器不会自动授予地理位置权限,navigator.geolocation.getCurrentPosition() 第一次调用时会弹出浏览器级权限提示;如果用户拒绝或之前选择“禁止”,后续调用会直接进入 error 回调,且不会再次弹窗。不能假设调用就一定有结果。
- 务必在调用前用
navigator.permissions.query({name: 'geolocation'})检查当前权限状态('granted'/'denied'/'prompt') - 若状态为
'denied',getCurrentPosition()会立刻触发 error,error.code通常是1(PERMISSION_DENIED),此时提示用户需手动到浏览器设置中开启 - HTTPS 是硬性要求:HTTP 协议下现代浏览器(Chrome、Firefox、Edge)会直接禁用 Geolocation API,连
navigator.geolocation都可能为undefined
正确处理 getCurrentPosition 的 success 和 error 回调
getCurrentPosition() 是异步操作,但不返回 Promise,必须靠回调函数捕获结果;错误类型不止一种,不同 code 对应不同修复路径。
-
success回调接收一个position对象,关键数据在position.coords.latitude和position.coords.longitude,单位是十进制度数 -
error回调的error.code常见值:1(用户拒绝)、2(位置不可用,如设备关 GPS 或无网络)、3(超时,默认 6000ms,可通过timeout选项调整) - 建议始终传入
error回调,哪怕只做console.error(error);忽略它会导致失败静默,调试困难 - 可选参数
{enableHighAccuracy: true, timeout: 5000, maximumAge: 30000}:开启高精度会延长获取时间并增加电量消耗,maximumAge表示可接受缓存位置的最大毫秒数
监听位置变化要用 watchPosition 而不是反复调用 getCurrentPosition
需要持续追踪用户移动(比如导航应用),应该用 navigator.geolocation.watchPosition(),它返回一个整数 ID,可用于后续取消监听;反复调用 getCurrentPosition() 不仅低效,还可能触发频繁权限弹窗或被浏览器限频。
-
watchPosition()的 success/error 回调签名与getCurrentPosition()完全一致 - 记得保存返回的
watchId,需要用navigator.geolocation.clearWatch(watchId)主动停止,否则持续占用资源 - 注意:部分 Android WebView 或旧版 iOS Safari 中,
watchPosition()在后台标签页可能暂停更新,不要依赖它保证实时性
实际部署时要注意坐标精度、定位来源和 fallback 方案
浏览器返回的坐标精度差异极大:Wi-Fi 定位可能误差几百米,GPS 在开阔地可达 5 米内,而某些企业内网环境甚至只能返回城市级别粗略坐标。不能把 coords.accuracy 当作绝对指标,更不能用于安全敏感场景(如门禁验证)。
立即学习“前端免费学习笔记(深入)”;
-
position.coords.accuracy单位是米,表示 95% 置信区间半径;若值 > 1000,大概率来自 IP 地址粗略估算,不宜用于地图标记 - 没有 GPS 的设备(如台式机)通常依赖 Wi-Fi 接入点数据库或 IP 归属地,结果不稳定;可考虑 fallback 到 IP 地理库(如 ipapi.co)做兜底,但需注意跨域和配额
- 移动端 Safari 对后台定位限制严格,切到其他 App 后
watchPosition可能数秒内停止回调;如需后台持续定位,必须引导用户启用系统级“始终允许”权限,并配合原生 App 实现
真正棘手的从来不是怎么写那几行 JS,而是用户点了“禁止”之后你有没有准备好降级方案,以及看到 accuracy: 2843 时还敢不敢把它标在地图正中央。



















