小程序地图定位授权取消后再次授权

更博啦，背景：webview+小程序，新增收货地址是h5页面，调的小程序地图。获取到地址后再将值带入网页中。最近写的项目中遇到地图定位弹框拒绝授权后，无法再次调起地图组件，页面显示空白，用户使用体验差。针对这个问题，找到两个原因导致该问题的出发点：

1.手机定位未开启

2.小程序地图弹框未授权

针对以上两个问题的解决思路如下：

一、模拟手机定位未开启状态，小程序地理信息弹框允许授权效果：

1. 关闭手机定位信息功能，进入小程序新增收货页面，选择地址，由于使用了小程序api （wx.getLocation） 。弹出地图定位授权弹框，此刻授权弹框出现，

2.点击授权，此刻小程序位置信息打开。但手机定位未开启，此刻出现弹框显示引导用户去开启

     

3. 开启手机位置定位后，再次前往小程序新增收货页面，选择地址，此刻地图显示：

 

二、模拟手机定位未开启，小程序地理信息弹框拒绝授权效果：

1.首先关闭手机位置，微信定位无法使用：

2.进入新增收货页面选择详细地址：

3.调起地理信息弹框选择拒绝授权，此刻我添加了一个引导页面，方便客户明白该操作意图，其次，通过手动调起小程序

设置的位置信息开关。防止有些用户不知道小程序拒绝授权后，用户信息以及位置信息设置在哪设置（小程序右上角三点，选择关于某某小程序名称，选择右上角三点，选择设置，才能看到用户信息以及位置信息开关选项。巴拉巴拉一堆，其实可以通过该引导页触发一个button事件去调起该页面即可，哈哈哈~~）

3.1、选择拒绝授权后则跳转到引导页，当客户点击授权地理位置按钮后，则自动调起小程序设置

 

3.2、通过打开位置信息后，此刻小程序授权信息已成功，此时。需要注意的是，我们的大范围手机未开启定位。

当你打开位置信息后跳转到地图页面会走监听手机开启状态逻辑。，如果没有开启则提示如下：

3.3、得知手机定位未开启后，点击以上确定。会自动跳转到上页面。然后用户离开小程序去手机设置中打开定位，如下：

3.4、当手机定位和小程序定位都开启后，进入新增地址页面，选择详细地址。地图组件被再次调起，如下图：

三、好啦。以上是对小程序地图定位的两种情况总结。下面来贴下实现的代码吧。简单的，相信你一看就懂了。毕竟看小仙女文章的宝宝们都很棒呀！

Page({

    /**
     * 页面的初始数据
     */
    data: {
        mapUrl: '',
        mapDataStr: '',
        isAuthorize:true, // 判断当前地图是否授权
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        let that = this;
        var returnUrlArr = decodeURIComponent(options.returnUrl).split('?');
        this.setData({
            mapUrl: returnUrlArr[0],
            mapDataStr: returnUrlArr[1]
        })

    },

    onReady: function(e) {
        var that = this;
        that.mapCtx = wx.createMapContext('myMap');
        that.getCenterLocation();
    },

    /**
     * 用户拒绝小程序地图授权，
     * button按钮触发去小程序设置中打开位置信息开关,隐藏按钮
     */
     
    openSettingCallBack(e){
        if (e.detail.authSetting['scope.userLocation'] == true){
            this.setData({
                isAuthorize: true
            })

            this.getCenterLocation();
        }
    },

    /**
     * 调起地图组件
     */
    getCenterLocation() {
        let that = this;
        wx.getLocation({
            type: 'wgs84', 
            success: function(res) {
                // 如果打开地图没有选择地址则跳转到原H5页面，否则选择地址后再进行跳转
                let latitude = res.latitude
                let longitude = res.longitude
                wx.chooseLocation({
                    latitude: latitude,
                    longitude: longitude,
                    scale: 28,
                    success: function(res) {
                        var getUserInfos = wx.getStorageSync('userInfo')
                        var userToken = wx.getStorageSync('userToken')
                        var returnDataStr = that.data.mapDataStr + '&avatarUrl=' + encodeURIComponent(getUserInfos.avatarUrl) + '&nickName=' + getUserInfos.nickName + '&address=' + res.address + '&addNameInfo=' + res.name + '&userToken=' + userToken + '&longitude=' + res.longitude + '&latitude=' + res.latitude;
                        var returnUrl = encodeURI(that.data.mapUrl + "?" + returnDataStr);
                        that.setData({
                            // 携带选择地址res.address返回到H5页面中
                            web_src: returnUrl
                        })
                    },
                    fail: function(res) {
                        wx.navigateBack({
                            delta: 1
                        })
                    }
                })
            },

            fail: function (res) {
                wx.getSetting({
                    success: (res) => {
                        if (res.authSetting['scope.userLocation'] != true) { //非初始化进入该页面,且未授权,按钮显示
                           that.setData({
                               isAuthorize: false,
                           })
                        }else{
                            wx.showModal({ // 手机定位未开启状态
                                title: '手机定位未开启',
                                content: '请在手机设置中打开定位，我们需要知道您的位置才能提供更好的服务~',
                                showCancel: false,
                                success: function (res) {
                                    wx.navigateBack({
                                        delta: 1
                                    })
                                }
                            })
                        }
                    }
                })
            }
        })
    },
})

希望本次经验分享能帮助到各位宝宝们，再接再厉~继续进击！如果有问题随时告知，互相学习 >0.0<