需求:使用uniapp在app或者微信小程序上获取经纬度以及中文地址信息等,使用vue3+ts
A:使用官方的系统定位即uni.getLocation,type只能传wgs84
这种方案Android与微信小程序只能获取到经纬度,获取不到地址信息,以前的官方可以获取地址信息是因为之前的腾讯SDK免费
H5未测,应该是根据所使用的浏览器是否购买了地图授权来决定,如QQ、微信浏览器。
IOS都可以获取到。
B:使用第三方服务,也是uni.getLocation,type可以传gcj02
这种方案其实主要是为了让Android能够获取地址信息,只需配置好相关key等信息后,记得重新打包基座,用自己的证书以及自己的包名才会生效。
但微信小程序还是获取不到地址信息,官网有说明的。
C:使用高德的微信小程序插件 从 参考链接学习到的方案。
这种方案可以使Android与微信小程序获取到地理地址位置信息等,天气信息都能获取到。
去高德创建微信小程序的key(就算打包Android也是使用的高德平台上生成的微信小程序的key),并下载高德小程序插件,放置到项目某一个目录中(非static即可),因为是使用ts+vue3编写需要修改该插件的最后一句代码为:
// module.exports.AMapWX=AMapWX;
export default { AMapWX };
然后在使用的地方:
import { ref, computed, onMounted, onUnmounted,reactive,onBeforeMount } from 'vue';
import amap from '../../libs/amap-wx.130.js'
let gaodeWXConfig = reactive({
amapPlugin: null,
key: '你的key',
addressName: '',
weather: {
data: []
}
})
onBeforeMount(()=>{
gaodeWXConfig.amapPlugin = new amap.AMapWX({
key: gaodeWXConfig.key
});
})
//获取地理位置
function refreshLocation(){
gaodeWXConfig.amapPlugin.getRegeo({
success: (data) => {
console.log("!!!!!!!!!getLocation",data)
locationText.value = data[0].desc || data[0].name;
},
fail: (res) => {
console.log("!!!!!!!!!getLocation fail",res)
}
});
}
//获取实时天气数据
function getWeather() {
uni.showLoading({
title: '获取信息中'
});
gaodeWXConfig.amapPlugin.getWeather({
success: (data) => {
console.log(data);
uni.hideLoading();
}
});
}
这是这两天研究的经验分享,如有不对或方案补充欢迎提出,谢谢。