watcheffect 可自动追踪响应式 geolocationstatus 和 currentposition 并在权限授予且坐标有效时触发地图请求，需用 ref 封装定位状态与坐标，配合 getcurrentposition 同步更新、错误处理及 oninvalidate 清理。
在 Vue 3 中，watchEffect 可以自动追踪响应式数据变化并执行副作用，非常适合用于“定位权限获取成功后立即触发地图数据请求”这类场景——它比手动监听 isGeolocationGranted 更简洁、更响应式。
确保定位状态是响应式的
浏览器的地理位置 API（navigator.geolocation）本身不是响应式，需要封装成 ref 或 reactive 对象。推荐用 ref 管理权限状态和坐标：
- 定义
const geolocationStatus = ref('pending')（值为'pending'/'granted'/'denied'） - 定义
const currentPosition = ref(null)，用于存储{ latitude, longitude } - 调用
getCurrentPosition时，把结果写入这两个 ref
用 watchEffect 监听位置就绪并触发地图请求
watchEffect 会自动收集依赖：只要在回调里读取了 currentPosition.value 和 geolocationStatus.value，它就会在两者变化时重新运行。关键点是——只在权限已授予且坐标有效时才发起请求：
- 判断条件：
if (geolocationStatus.value === 'granted' && currentPosition.value) - 内部调用地图 SDK（如高德、腾讯或 Leaflet）的周边搜索方法，例如
amap.searchNearby(...) - 可加防抖或节流逻辑（比如用
setTimeout避免重复快速触发）
示例片段：
watchEffect(() => {
if (geolocationStatus.value === 'granted' && currentPosition.value) {
loadNearbyPlaces(currentPosition.value.latitude, currentPosition.value.longitude)
}
})
权限请求与错误处理要同步更新状态
watchEffect 不负责发起权限请求，这部分需单独处理，并确保更新 ref：
- 点击按钮时调用
navigator.geolocation.getCurrentPosition - 成功回调中：赋值
currentPosition.value = { latitude, longitude }，并设geolocationStatus.value = 'granted' - 失败回调中：根据
error.code判断是拒绝（1）还是不可用（2），设对应 status
这样 watchEffect 才能及时响应新状态，避免“权限已给但没触发加载”的问题。
注意 watchEffect 的执行时机和清理
watchEffect 在组件挂载时立即执行一次（此时若坐标为空则跳过），后续只在依赖变化时运行。如果地图请求是异步的（如 fetch 或 SDK 回调），不需要手动清理；但如果你在内部启动了定时器或事件监听，应在 onInvalidate 中清除：
- 传入第二个参数函数，在下次执行前被调用，适合清理上一次的 pending 请求或监听器
- 例如：
controller = new AbortController()，并在onInvalidate中调用controller.abort()
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
