小程式獲取使用者位置資訊後再次手動授權

JoeYoung發表於2019-04-09

最近使用小程式獲取當前的地理位置，提示“getLocation需要在app.json中宣告permission欄位”，然後在app.json中增加permission屬性配置：

"permission": {
    "scope.userLocation": {
      "desc": "你的位置資訊將用於小程式位置介面的效果展示"
    }
 },

使用者首次進入獲取其地理位置資訊要先經過授權，如果使用者同意將成功獲取到其地理位置，然後頁面顯示一個‘獲取位置資訊’按鈕，點選後跳到地圖並標識其當前所在位置；如果開始授權時使用者拒絕了，那麼頁面會顯示一個‘授權並獲取位置資訊’按鈕，使用者點選後會跳到授權設定頁面，需要進行手動設定，設定後根據結果，如果設定了同意那麼返回後顯示地圖上的其所在位置，如果沒有設定同意返回後還是顯示‘授權並獲取位置資訊’按鈕。

wxml：

<button wx:if="{{isLocation}}" bindtap='Location'>獲取位置資訊</button>
<button wx:else open-type="openSetting" bindopensetting='bindopensetting'>點選授權並獲取位置資訊</button>

js：

data:{
    isLocation: false  
},

/**
   * 生命週期函式--監聽頁面載入
   */
onLoad: function(options){
    var that = this;
    //彈出授權使用者確認後獲取其地理位置
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          isLocation: true,
          latitude: latitude,
          longitude: longitude
        })
      },
      fail: function (res) {
        console.log('拒絕授權')
        that.setData({
          isLocation: false
        })
      }
    })

},
//獲取位置資訊
 Location: function (e) {
    wx.openLocation({
      latitude: this.data.latitude,
      longitude: this.data.longitude,
      scale: 18
    })
  },
  //手動設定授權
 bindopensetting: function (e) {
    var that = this;
    if (!e.detail.authSetting['scope.userLocation']) {
      that.setData({
        isLocation: false
      })
    } else {
      that.setData({
        isLocation: true,
      })
      wx.getLocation({
        type: 'wgs84',
        success: function (res) {
          var latitude = res.latitude
          var longitude = res.longitude

          that.setData({
            latitude: latitude,
            longitude: longitude
          })
          wx.openLocation({
            latitude: latitude,
            longitude: longitude,
            scale: 18
          })
        }
      })
    }
  },

使用者首次進入通過onload 中的 wx.getLocation彈框授權位置，如果同意isLocation設定為true並儲存位置資訊，這時頁面直接顯示“獲取位置資訊”按鈕，點選後通過Location事件直接開啟地圖，通過開始同意授權後儲存的經緯度顯示當前位置。 如果使用者第一次拒絕了授權，那麼isLocation設定為false，顯示的是“點選授權並獲取位置資訊”按鈕，這時這個button按鈕的設定方式open-type=“openSetting” bindopensetting=‘bindopensetting’，用按鈕的open-type發起開啟授權設定頁，bindopensetting是設定使用者設定授權之後的回撥，我們可在回撥裡判斷使用者勾沒勾選同意授權，如果判斷同意了，那麼isLocation設定為true，之後顯示的都是“獲取位置資訊”，不必授權直接顯示地圖；如果沒有勾選同意那麼isLocation設定是false，之後再經過這個頁面還是顯示“點選授權並獲取位置資訊”。最後注意的是在回撥裡可以用回撥函式的引數來判斷e.detail.authSetting。

相關文章