1、要实现这个功能首先分析地图选点需要的条件
- 用户手机开启微信定位权限(针对iOS和Android做兼容)
- 用户允许定位授权
- 微信API-wx.chooseLocation(Object Object)
2、条件分析完,下面开始代码
iOS和Android微信定位权限的兼容:
wx.chooseLocation在安卓中的fail回调没有直接的表示微信不允许定位权限,在wx.getLocation的fail回调中通过判断errMsg可以判断用户是否开启定位权限
代码如下:
let systemInfo = wx.getSystemInfoSync(); _this.setData({ systemInfo,
})
if(_this.data.systemInfo.system.indexOf(\'Android\') >= 0){ //安卓系统 wx.getLocation({ success:function (res) { console.log(\'getLocation res success:\', res); chooseLocation.call(_this) }, fail:function (res) { console.log(\'getLocation res fail:\', res); // 系统关闭定位 if(res.errMsg === \'getLocation:fail:system permission denied\' || res.errMsg === \'getLocation:fail:system permission deny\'){ return wx.showModal({ title:\'无法获取你的位置信息\', content:\'请到手机系统的[设置]->[位置信息]中打开定位服务,并允许微信使用定位服务。\', showCancel:false, confirmText:\'确定\', confirmColor:\'#0052A4\' }) } //用户取消授权 if(res.errMsg === \'getLocation:fail:auth deny\' || res.errMsg === \'getLocation:fail:auth denied\'){ //用户取消授权 _this.setData({cancelLoaction:true}) getSetting.call(_this) } } }) }else{ chooseLocation.call(_this) }
小程序在调用微信位置的时候需要用户授权允许,API提供了wx.getSetting
代码如下:
const getSetting = function () { let _this = this; wx.getSetting({ success:function (res) { let authSetting = res.authSetting; console.log(\'getSetting\',authSetting); //是否授权地理位置 console.log(authSetting[\'scope.userLocation\'], \'2222222222222\'); if(authSetting[\'scope.userLocation\']){ getLocation.call(_this) }else{ wx.openSetting({ success:function (res) { let authSetting = res.authSetting; console.log(\'open setting\', authSetting); if(authSetting[\'scope.userLocation\']){ _this.setData({cancelLoaction:false}) getLocation.call(_this) }else{ } } }) } } }) }
cancelLoaction,对于用户有可能误点了“不允许”,字段对这个做了判断
下面就是事件触发
setPoidAdd: function () { let _this = this; if(_this.data.cancelLoaction){ getSetting.call(_this) }else{ getLocation.call(_this) } },
最重要的是还是wx.chooseLocation
const chooseLocation = function () { wx.chooseLocation({ success:function (res) { console.log(\'chooseLocation\',res); if(res.address !== \'\' && res.name !== \'\'){ //确认选择地址之后adress和name才不会为空
let maddr = _this.data.maddr; maddr.poiaddress = res.address + res.name; maddr.longitude = res.longitude; maddr.latitude = res.latitude; _this.setData({ maddr, }) } }, fail:function (res) { console.log(\'fail\', res); if(res.errMsg === \'chooseLocation:fail cancel\') return; //res.errMsg === \'chooseLocation:fail auth deny\' || res.errMsg === \'chooseLocation:fail auth denied\' //用户取消授权 if(res.errMsg){ _this.setData({cancelLoaction:true}) getSetting.call(_this) } } }) }
PS:机型测试这边发现华为P20是不ok的,报的错误时服务器错误,并且不止是这个用例测试失败,其他wxApp也是不OK的,考虑可能是因为手机定位服务问题,其他暂未发现什么问题。
附上getLocation方法完整代码
const getLocation = function () { let _this = this; const chooseLocation = function () { wx.chooseLocation({ success:function (res) { console.log(\'chooseLocation\',res); if(res.address !== \'\' && res.name !== \'\'){ //确认选择地址之后adress和name才不会为空 let maddr = _this.data.maddr; maddr.poiaddress = res.address + res.name; maddr.longitude = res.longitude; maddr.latitude = res.latitude; _this.setData({ maddr, }) } }, fail:function (res) { console.log(\'fail\', res); if(res.errMsg === \'chooseLocation:fail cancel\') return; //res.errMsg === \'chooseLocation:fail auth deny\' || res.errMsg === \'chooseLocation:fail auth denied\' //用户取消授权 if(res.errMsg){ _this.setData({cancelLoaction:true}) getSetting.call(_this) } } }) } console.log(\'systemInfo res:\', _this.data.systemInfo); if(_this.data.systemInfo.system.indexOf(\'Android\') >= 0){ //安卓系统 wx.getLocation({ success:function (res) { console.log(\'getLocation res success:\', res); chooseLocation.call(_this) }, fail:function (res) { console.log(\'getLocation res fail:\', res); // 系统关闭定位 if(res.errMsg === \'getLocation:fail:system permission denied\' || res.errMsg === \'getLocation:fail:system permission deny\'){ return wx.showModal({ title:\'无法获取你的位置信息\', content:\'请到手机系统的[设置]->[位置信息]中打开定位服务,并允许微信使用定位服务。\', showCancel:false, confirmText:\'确定\', confirmColor:\'#0052A4\' }) } //用户取消授权 if(res.errMsg === \'getLocation:fail:auth deny\' || res.errMsg === \'getLocation:fail:auth denied\'){ //用户取消授权 _this.setData({cancelLoaction:true}) getSetting.call(_this) } } }) }else{ chooseLocation.call(_this) } }
请发表评论