1. 为什么 uni-app x 定位这么容易踩坑
最近在 uni-app x 项目里做定位,遇到了几个典型问题:
- H5 端只能走 IP 定位,精度到城市级;
- 微信小程序端权限配置容易漏,真机调试静默失败;
- App 端纯 GPS 在室内和城市峡谷漂移明显;
- 拿到经纬度后还要处理 WGS84、GCJ02、BD09 坐标偏移;
- 不同端返回结构不一致,业务代码里全是平台判断。
这些问题单独看都不难,但叠在一起就很烦。后来我干脆做了一层统一封装,核心思路就三点:分层定位、统一坐标系、错误兜底。
底层用了一个 uni-app x 适配的定位 SDK,这里不展开产品,重点看封装思路。它内部会按 Wi-Fi 辅助定位、原生 GPS、IP 定位做优先级切换,同时支持直接返回指定坐标系,省去手动转换。
2. 统一封装代码
2.1 初始化
javascript
import location from '@/utils/location-sdk.js';
// 单次定位
location.init({
key: 'YOUR_KEY',
once: true,
interval: 0
});
如果是连续定位,把 once 改成 false,interval 建议不低于 2000ms,避免频繁回调拖垮页面。
2.2 获取位置与逆地理编码
javascript
location.getLocation({
success: (res) => {
console.log(res.longitude, res.latitude);
console.log(res.address?.name); // 结构化地址
console.log(res.spatialReference); // 当前坐标系
},
fail: (err) => {
console.error(err.code, err.msg);
}
});
关键点是 spatialReference。很多地图偏移问题,都是因为没显式指定坐标系。建议在初始化或调用时直接传 gcj02、wgs84、bd09,后面接地图就省心了。
2.3 POI 搜索与坐标转换
javascript
// 附近 POI 搜索
location.poiNearbySearch({
keyword: '咖啡',
radius: 1000,
success: (res) => {
console.log(res.pois);
}
});
// 坐标转换
location.getLocationByCoordinate('gcj02', {
longitude: 114.06,
latitude: 22.54,
success: (res) => {
console.log(res.longitude, res.latitude);
}
});
这两个能力在门店签到、附近推荐、地图对齐场景里很实用,建议和定位主流程解耦,方便单独重试。
3. 几个必须注意的坑
3.1 微信小程序权限
微信小程序需要在 manifest.json 中配置 requiredPrivateInfos,并申请后台定位权限。否则真机调试时可能不报错,但一直拿不到位置。
3.2 H5 端不要指望高精度
H5 端受浏览器限制,通常只能做城市级兜底。如果业务强依赖高精度,建议引导用户使用 App 或小程序。
3.3 坐标系一定要显式指定
不指定坐标系,后面接高德、百度、腾讯地图时大概率偏移。显式传参比事后转换更省事。
3.4 逆地理编码和 POI 搜索分开调用
不要把逆地理编码强绑在定位成功回调里。分开调用后,定位失败也能单独重试逆地理,页面逻辑更清晰。
4. 小结
uni-app x 做定位,难点不在"拿到经纬度",而在多端行为不一致和坐标系混乱。先把统一封装做好,后面换不换底层 SDK,业务代码都不用大改。
如果你也在做多端定位,建议优先把权限、坐标系、错误码这三块统一掉,能省掉后面很多排查时间。
参考资料:
uni-app x 定位 SDK 文档:https://lothub.newayz.com/uni_api/