watchposition()持续监听位置变化并反复触发成功回调，需传入成功回调、错误回调及选项，返回watchid用于后续clearwatch()停止监听。
watchPosition() 的基本调用方式
调用 watchPosition() 就是启动一个后台位置监听器，它会在设备位置变化时反复触发成功回调。和 getCurrentPosition() 不同，它不会只执行一次，而是持续运行，直到你主动停止或页面卸载。
必须传入至少一个成功回调函数，错误回调建议也加上，否则定位失败时完全无感知：
const watchID = navigator.geolocation.watchPosition(
(position) => {
console.log(position.coords.latitude, position.coords.longitude);
},
(error) => {
console.error(error.code, error.message);
},
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 30000
}
);
注意：返回值 watchID 是一个数字（部分旧浏览器可能是字符串），后续停止监听全靠它。
不保存 watchID 就等于无法停止监听
watchID 是一次性生成的标识符，作用域内不可恢复。如果声明在局部作用域（比如某个按钮点击事件内部），外部就拿不到它，clearWatch() 根本没法调用。
- 错误写法：
document.getElementById('start').onclick = () => { const watchID = navigator.geolocation.watchPosition(...); };——watchID离开函数就销毁 - 正确做法：把
watchID存在全局变量、模块级变量或组件实例属性里，例如window.currentWatchID = navigator.geolocation.watchPosition(...); - 更稳妥的做法是加类型判断：
if (typeof watchID === 'number') { window.watchID = watchID; }，避免旧浏览器返回非数字类型导致后续clearWatch()静默失败
什么时候该调用 clearWatch()？
clearWatch(watchID) 是唯一标准的停止方式，没有“自动停止”或“批量清除”内置机制。常见需手动调用的场景包括：
- 用户点击“停止定位”按钮
- 页面切换或组件卸载前（比如 React 的
useEffect清理函数、Vue 的beforeUnmount） - 监听到连续多次定位失败（比如
error.code === 1即PERMISSION_DENIED），再继续也没意义 - 业务逻辑完成，比如导航已到达终点、打卡已提交成功
调用示例：navigator.geolocation.clearWatch(window.watchID);。重复调用不会报错，但无效 —— 对应的监听器早已被移除。
容易被忽略的兼容性与权限细节
Geolocation API 并非“写了就能用”，几个硬性前提必须满足：
- 必须运行在安全上下文：HTTPS 或
localhost/127.0.0.1；file://协议下多数现代浏览器已禁用 - 用户必须明确授权：首次调用会弹系统级权限请求，拒绝后再次调用
watchPosition()会直接进错误回调，且error.code为1 - 某些 Android WebView 或 iOS Safari 在后台标签页中会暂停定位更新，不是 bug，是系统策略
-
enableHighAccuracy: true并不总有效：它只是“请求”高精度，实际是否启用取决于设备能力与系统设置（比如 GPS 是否开启）
真正难处理的不是怎么启，而是怎么稳——权限状态变化、页面生命周期、多标签页共存时的 watchID 冲突，这些才是线上出问题最多的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
