【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址

摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等..

场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息

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 () {} })

 

今天的课就上到这里了,各位同学再见!

留个微信,欢迎交流

【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址

 

【微信小程序】获取用户地理位置权限,二次请求授权,逆解析获取地址

上一篇:Spring多数据源的配置与使用


下一篇:微信小程序 键盘显示短信验证码