Vue自定义事件是解耦地理位置更新通知的桥梁，定位逻辑专注获取坐标并抛出location-updated等事件，由监听方决定响应动作，支持父子通信、事件总线或provide/inject跨层级分发。
Vue 自定义事件本身不直接处理地理位置更新，但它可以作为触发与分发地理状态变化的桥梁。真正获取位置（如用 navigator.geolocation 或高德/百度地图 SDK）是独立逻辑，而自定义事件负责把“位置变了”这个事实，以解耦、可控的方式通知给其他组件。
核心思路：位置获取与事件分发分离
不要在获取位置的代码里直接调用兄弟组件方法或修改全局状态。而是让定位模块（可以是组合式函数、Mixin 或专用 Hook）在拿到新坐标后，通过 $emit（Vue2）或 defineEmits（Vue3）抛出自定义事件，由监听方决定如何响应。
- 定位逻辑专注“怎么拿坐标”，比如封装一个
useGeolocation()组合式函数，内部调用watchPosition并持续输出{ lng, lat, accuracy } - 事件只承载“发生了什么”，例如
location-updated，不包含业务逻辑（如“刷新地图”或“计算距离”） - 父组件或业务组件监听该事件，再决定是否调用地图组件的
panTo、更新 marker、请求附近 POI 等
Vue3 中的典型写法（推荐 Composition API）
假设你有一个 LocationTracker.vue 组件，它负责持续获取并报告位置：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 子组件中声明事件：
const emit = defineEmits(['location-updated', 'location-error']) - 在成功获取位置后：
emit('location-updated', { lng, lat, timestamp: Date.now() }) - 父组件使用：
- 父组件方法中可做：
mapInstance.setCenter([lng, lat])或updateUserMarker({ lng, lat })
结合地图组件（如 vue-amap）时的注意事项
像 center、radius），但它们不主动监听位置事件。你需要手动桥接：
- 监听
location-updated后，更新circles数组中的center值，触发 Vue 响应式更新 → 地图圆形会自动重绘 - 若需高亮用户当前位置，可额外维护一个
userMarker对象，并在事件回调中同步设置其position - 避免在事件回调里反复 new AMap.Marker；优先复用已有实例并调用
setPosition
跨层级或非父子场景：用事件总线或 provide/inject
如果定位模块是全局服务（如一个 Pinia store 或独立的 locationService.js），而地图组件散落在不同路由下，这时不宜强依赖父子链：
- 用
mitt或tiny-emitter创建轻量事件总线，统一 emit/listengeo:update - 在 setup 中用
provide/inject把 emit 函数注入深层子组件，实现“就近发布” - 不推荐直接操作
window或全局对象，容易泄漏和难测试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
