微信小程序uniapp+vue3+高德地图sdk获取用户当前位置信息

4,899 阅读2分钟

最近在研究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,小程序无需在这里配置

官方给出的返回数据定义:

image.png

我们先来看看uni.getLocation到底返回了什么:

image.png

运行后发现:

image.png

很明显,address地址信息是无法返回的,官网中也提到,只有在APP中能返回,我并没有测试APP,如果我想在微信小程序中获取当前的地址信息,该怎么做呢,回看官方提供的解决方案,用到了高德地图SDK,在app和微信小程序中都可以获取中文地址,我觉得可以一试,说干就干:

第一步 申请高德地图SDK密钥,也就是常用的key

注册地址:

lbs.amap.com/api/wx/summ…

console.amap.com/dev/key/app

按照要求注册认证后,添加应用,选择微信小程序,添加成功后,会自动生成key

image.png

image.png

后面我们就可以用这个key去操作高德地图的SDK

第二步 在uniapp中引入高德地图sdk

下载解压高德地图给微信小程序提供的sdk,下载地址:lbs.amap.com/api/wx/down…

将下载解压后的js文件放入uniapp项目中:

image.png

接下来我们就要通过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

改好后,我们在文件中引入:

image.png

运行后,发现报错了:

image.png

查阅资料发现:

image.png

疑问的是,我们并没有直接调用uni.getLocation,而是调用第三方的api,为什么还要声明呢,唯一可能的解释就是uniapp检测出代码中存在获取位置信息的逻辑,所以需要事先声明,那我们就按照要求在配置文件中声明一下:

image.png

同样的我们在微信开发者工具中的app.json也配置同样的属性:

image.png

再次更新点击查看地址按钮后,返回数据:

image.png

这样我们既可以获取到经纬度信息,还可以获取到中文地址信息了!