useLocation 封装跨端定位逻辑，暴露 location、loading、error、refused 四个响应式字段，自动适配 H5/watchPosition、小程序/uni.getLocation、App/权限校验，内置权限判断、坐标系转换（WGS84↔GCJ-02）、防抖及多端错误处理。

Vue 3 组合式函数（Composable）实现地理位置坐标的实时获取，核心思路是封装跨端定位逻辑，把权限判断、坐标拉取、错误处理、坐标系转换等流程收口到一个可复用的 useLocation 函数中，而不是在每个页面重复写 uni.getLocation 或 navigator.geolocation.watchPosition。

封装成响应式定位 Hook

用 ref 管理状态，暴露 location、loading、error、refused 四个关键字段，内部根据运行环境自动选择定位方式：

• H5 端调用 navigator.geolocation.watchPosition，监听位置变化，注意 HTTPS 要求和 WGS84 坐标偏移问题
• 微信小程序端走 uni.getLocation，但需提前校验 requiredPrivateInfos 和 getSetting 授权状态，拒绝后引导 openSetting
• App 端依赖 uni.getLocation，但要检查 manifest.json 是否启用定位模块，iOS 需 NSLocationWhenInUseUsageDescription，Android 注意运行时权限与超时设置

处理多端差异与边界情况

不能只写一次成功回调，真实场景必须覆盖这些细节：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 首次调用前先查权限：小程序用 uni.getSetting，H5 用 navigator.permissions.query({ name: 'geolocation' })
• 用户拒绝后，再次调用会静默失败，需主动识别 err.code === 1（授权拒绝）并提示跳转设置页
• 坐标系统一：H5 返回 WGS84，微信/高德/天地图常用 GCJ-02，需在 Hook 内部做转换（如用 gcoord 库）
• 防抖与节流：避免地图组件频繁重绘，可在位置更新后加 useThrottleFn 或简单 setTimeout 控制触发频率

配合地图组件使用

获取到坐标后，不是直接塞给地图，而是确保格式匹配：

立即学习“前端免费学习笔记（深入）”；

• 高德地图接受 [lng, lat] 数组，且默认为 GCJ-02
• 天地图用 LngLat 对象，EPSG:4326（WGS84）需显式声明投影
• 建议在 Hook 返回值里增加 transformed 字段，比如 location.gcj02 和 location.wgs84 同时存在，由业务层按需选用

不推荐裸用原生 API 的原因

直接在组件里写 watchPosition 或 uni.getLocation 会导致：

• 三端代码分散，改一个逻辑要同步修 H5 / 小程序 / App 三处
• 权限弹窗链路缺失，用户点了“拒绝”就卡死，无二次引导
• 没有 loading 状态管理，UI 不知何时该显示加载动画
• 坐标未做防抖，快速移动时地图疯狂刷新，影响性能和体验