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);推荐写法:
立即学习“Java免费学习笔记(深入)”;
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 组件
beforeUnmount没处理 - 多次调用
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。
生产环境部署后,务必确认证书有效,自签名证书也会被拒绝。











