小程序wx.chooseLocation地图选点确认地址

1、要实现这个功能首先分析地图选点需要的条件

  • 用户手机开启微信定位权限(针对iOS和Android做兼容)
  • 用户允许定位授权
  • 微信API-wx.chooseLocation(Object Object)

2、条件分析完,下面开始代码

  iOS和Android微信定位权限的兼容:

  wx.chooseLocation在安卓中的fail回调没有直接的表示微信不允许定位权限,在wx.getLocation的fail回调中通过判断errMsg可以判断用户是否开启定位权限

  代码如下:

1 let systemInfo = wx.getSystemInfoSync();
2         _this.setData({
3             systemInfo,
4         })
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)
    }
}

 

猜你喜欢

转载自www.cnblogs.com/Emmie/p/10884849.html
0条评论
添加一条新回复