微信小程序开启实时定位功能
有两种开启小程序实时定位的方法:startLocationUpdate和startLocationUpdateBackground。其中后者是在小程序被挂到后台,也能获取实时定位。
实时开启小程序定位的文档:
https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.startLocationUpdate.html
在App.vue页面中定义JS代码,开启实时获得GPS定位。因为小程序启动之后会运行onLaunch()函数,所以我们就把开启实时定位的代码写到onLaunch()函数里面。
onLaunch: function() {
//开启GPS后台刷新
wx.startLocationUpdate({
success(resp) {
console.log('开启定位成功');
},
fail(resp) {
console.log('开启定位失败');
}
});
//GPS定位变化就自动提交给后端
wx.onLocationChange(function(resp) {
let latitude = resp.latitude;
let longitude = resp.longitude;
let location = { latitude: latitude, longitude: longitude };
//触发自定义事件
uni.$emit('updateLocation', location);
});
},
小程序每次获得最新GPS定位坐标之后,都会执行onLocationChange()函数,然后我们就能拿到最新的经纬度坐标。但是我们想要把坐标数据传递给工作台页面,很多人会想到Storage机制。但是Storage在频繁读写的条件下会丢失数据,特别是小程序一秒钟会获得很多GPS定位,读写Storage很多次,必然会丢失数据,所以千万不能使用Storage机制。
为了在页面之间快速高频传递数据,我们要用自定义事件。比如在App.vue页面抛出一个自定义事件,可以在其中绑定数据,然后让工作台页面捕获到这个事件,于是数据就传递给了工作台页面。
捕获定位事件
在onShow()回调函数中,定义JS代码,捕获自定义事件,更新地图定位的坐标,并且还要把定位坐标计算出对应的地址信息,然后设置成默认的上车点。把坐标转换成地址的功能叫做“逆地址解析”。
腾讯位置服务的文档:
https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodReverseGeocoder
onShow: function() {
let that = this;
that.map = uni.createMapContext('map');
let qqmapsdk = new QQMapWX({
key: that.tencent.map.key
});
//实时获取定位
uni.$on('updateLocation', function(location) {
//console.log(location);
//避免地图选点的内容被逆地址解析覆盖
if(that.flag!=null){
return
}
let latitude = location.latitude;
let longitude = location.longitude;
that.latitude = latitude;
that.longitude = longitude;
that.from.latitude = latitude;
that.from.longitude = longitude;
//把坐标解析成地址
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function(resp) {
//console.log(resp);
that.from.address = resp.result.address;
},
fail: function(error) {
console.log(error);
}
});
});
},
onHide: function() {
uni.$off('updateLocation');
},

浙公网安备 33010602011771号