uniapp实现H5和微信小程序获取当前位置(腾讯地图)
之前的一个老项目,使用 uniapp 的 uni.getLocation 发现H5端定位不准确,比如余杭区会定位到临平区,根据官方文档初步判断是项目的uniapp的版本太低。
我选择的方式不是区更新uniapp的版本,是直接使用高德地图的api获取定位。
1.首先在腾讯地图后台拿到地图的key
2.H5获取高德当前位置
1)腾讯地图搜索定位组件:
2)html文件中引入
<script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
3)调用地图获取定位
// 高德地图获取定位H5
getH5Location(){
let self = this;
var geolocation = new qq.maps.Geolocation('key','3212便民招聘网');
geolocation.getLocation((position)=>{
console.log(position,'position0');
uni.setStorageSync('location_address', position.province + position.city + position.district);
self.district = position.district;
}, (err)=>{
console.log(err,'err');
})
},
3.微信小程序获取当前定位
1)在manifest.json文件中勾选小程序位置,用户打开小程序后,会弹框显示是否要授权定位,点击确定才会获取定位
2)根据文档的步骤来,文档位置:微信小程序javascript SDK
3)下载 JavaScriptSDK v1.2 文件放在目录下,使用uniapp的uni.getLocation 来获取当前位置的经纬度,初始化地图实例,将位置的经纬度解析成中文地址
引入:
var QQMapWX = require('@/libs/qqmap-wx-jssdk.min.js');
// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
getWXLocation() {
let self = this
if(self.district){
return;
}
uni.getLocation({
type: 'gcj02',
isHighAccuracy: true,
success: (res) => {
let latitude, longitude;
latitude = res.latitude.toString();
longitude = res.longitude.toString();
self.qqmapsdk = new QQMapWX({
key: 'key' // 申请的key
});
console.log(this.qqmapsdk,'self.qqmapsdk');
self.qqmapsdk.reverseGeocoder({
location:{
latitude: latitude,
longitude: longitude
},
success(response) {
console.log(response,'res---22');
uni.setStorageSync('location_address', position.province + position.city + position.district);
},
fail: function(error) {
console.error(error,'error');
}
})
}
});
},
4)调用
onLoad: function(options) {
// #ifdef H5
this.getH5Location();
// #endif
//#ifdef MP
this.getWXLocation();
//#endif
},