【微信小程序】獲取用戶地理位置權限，二次請求授權，逆解析獲取地址

摘要：微信小程序內獲取用戶地理位置信息授權，被拒絕后二次獲取，獲取權限后逆解析得到用戶所在省市區等..

場景：商城類小程序，在首頁時需展示附近門店，即用戶剛進入小程序時就需要獲取到用戶位置信息

step1

在小程序中若要獲取用戶地理位置信息，需得到用戶明確授權，且聲明用途，所以首先在app.json中配置聲明

參見（https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html）

"permission": {
    "scope.userLocation": {
        "desc": "你的位置信息將用於獲取附近門店"
    }
  }

 

step2

聲明之后即可調用   wx.authorize  向用戶申請授權，用戶同意之后 調用    wx.getLocation   得到經緯度並做下一步處理

 

參見（https://developers.weixin.qq.com/miniprogram/dev/api/open-api/authorize/wx.authorize.html）

//可以通過 wx.getSetting 先查詢一下用戶是否授權了 "scope.userLocation" 這個 scope，也可直接調用wx.authorize請求授權；
wx.getSetting({
      success(res) {// 查看所有權限
      let status = res.authSetting['scope.userLocation']// 查看位置權限的狀態，此處為初次請求，所以值為undefined
        if (!status) {// 如果是首次授權(undefined)或者之前拒絕授權(false)
          wx.authorize({ // 發起請求用戶授權
            scope: 'scope.userLocation',
            success() {// 用戶允許了授權
              wx.getLocation({ // 請求位置信息
                type: 'gcj02',
                success (res) {
                  console.log(res, 95);//  得到位置信息（經緯度，速度等等），====>>>>>請求附近門店
                }
              })
            }
          })
        }
      }
    })

step3

兼容用戶拒絕授權的場景：若用戶可能會點擊不允許，我們是拿不到位置信息的，而且我們再次調用  wx.authorize  請求位置授權，上面的彈框是不會再次出現的，除非用戶刪除小程序后再次進入 ，那如果我們還需要再次向用戶申請授權呢？

當當當當~

這時我們就需要用到wx.openSetting了，這個api可以直接跳轉打開設置頁面，引導用戶授權

具體代碼如下：

wx.openSetting({
        success (data) {
          if (data.authSetting["scope.userLocation"] == true) {
            wx.showToast({
              title: '授權成功',
              icon: 'success',
              duration: 2000,
              success () {}
            })
          }
        }
      })

 

 用戶授權之后，我們就可以再次 使用 wx.getLocation 來獲取位置信息了

step4

通過經緯度，逆解析獲取用戶城市

這里使用的是百度地圖的api，使用方法非常簡單，調用接口，傳入經緯度，就可以得到省市區，甚至街道啦（但是街道不怎么准，省市區一般也夠用了）

// 百度地圖的密鑰請自行注冊。。。
wx.request({
            url: 'http://api.map.baidu.com/geocoder/v2/?ak=你的密鑰&location=' + latitude + ',' + longitude + '&output=json',
            data: {},
            header: { 'Content-Type': 'application/json' },
            success: function (ops) {
              wx.setStorageSync('province', ops.data.result.addressComponent.province)//把位置信息存起來
              wx.setStorageSync('city', ops.data.result.addressComponent.city)// 把位置信息存起來
            },
            fail: function (resq) {
              wx.showModal({
                title: '信息提示',
                content: '請求失敗',
                showCancel: false,
                confirmColor: '#f37938'
              });
            },
            complete: function () {}
          })

 

今天的課就上到這里了，各位同學再見！

留個微信，歡迎交流