小程序获取用户位置信息后再次手动授权

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

最近使用小程序获取当前的地理位置，提示“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。