最近在研究uniapp开发微信小程序中,遇到了一个获取当前用户位置信息的需求,乍一看是比较简单的,uniapp官方也提供了相关的api接口 uni.getLocation:
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
}
});
但是,继续往下面读文档uniapp.dcloud.net.cn/api/locatio… 会发现一条说明:
api默认不返回详细地址中文描述。需要中文地址有2种方式:1、使用高德地图小程序sdk,在app和微信上都可以获得中文地址,参考。2、只考虑app,使用plus.geolocation也可以获取中文地址。manifest里的App SDK配置仅用于app,小程序无需在这里配置
官方给出的返回数据定义:
我们先来看看uni.getLocation到底返回了什么:
运行后发现:
很明显,address地址信息是无法返回的,官网中也提到,只有在APP中能返回,我并没有测试APP,如果我想在微信小程序中获取当前的地址信息,该怎么做呢,回看官方提供的解决方案,用到了高德地图SDK,在app和微信小程序中都可以获取中文地址,我觉得可以一试,说干就干:
第一步 申请高德地图SDK密钥,也就是常用的key
注册地址:
按照要求注册认证后,添加应用,选择微信小程序,添加成功后,会自动生成key
后面我们就可以用这个key去操作高德地图的SDK
第二步 在uniapp中引入高德地图sdk
下载解压高德地图给微信小程序提供的sdk,下载地址:lbs.amap.com/api/wx/down…
将下载解压后的js文件放入uniapp项目中:
接下来我们就要通过import的方式引入sdk,这里有个需要注意的地方:
import 方式导入js 模块需要在js文件中声明 export 导出,查看amap-wx.130.js文件发现文件末尾的导出是这样写的
module.exports.AMapWX=AMapWX;
这种导出方式对应的是Vue 2,在Vue 3项目中我们需要进行如下修改:
export default { AMapWX };
否则就会报错: "default" is not exported by "../../../../../../E:/workspace_uniapp/uniapp-vue3-ds/js_sdk/amap/amap-wx.130.js
改好后,我们在文件中引入:
运行后,发现报错了:
查阅资料发现:
疑问的是,我们并没有直接调用uni.getLocation,而是调用第三方的api,为什么还要声明呢,唯一可能的解释就是uniapp检测出代码中存在获取位置信息的逻辑,所以需要事先声明,那我们就按照要求在配置文件中声明一下:
同样的我们在微信开发者工具中的app.json也配置同样的属性:
再次更新点击查看地址按钮后,返回数据:
这样我们既可以获取到经纬度信息,还可以获取到中文地址信息了!