vue怎么获取用户的位置经纬度_微信小程序弹出用户授权弹窗,微信小程序引导用户授权,获取位置经纬度...

我们在开发小程序时,有些操作必须让用户授权。比如我们获取用户位置,需要用户授权位置信息。授权操作我们需要给用户弹窗提示,在用户禁用某些权限时,又要引导用户去设置页开启相应权限。我们这里就以获取经纬度为例,来带大家学会友好的引导用户授权。

老规矩,先看效果图

91145e6b9a59b0f9da9fa5d3cb5febf4.png

授权.gif

一,我们使用位置信息,就需要授权

 //校验位置权限是否打开
 checkLocation() {  let that = this;  //选择位置,需要用户授权
  wx.getSetting({
   success(res) {    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //这里提示失败原因
        title: '授权成功!',        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('需要授权位置信息');
      }
     })
    }
   }
  })
 },

9e71a664b58aa89b695bb8cd96bde18c.png

弹窗.png

首先检验用户是否授权位置信息的权限“scope.userLocation”,如果有授权,我们就可以直接去获取用户的位置经纬度了。如果没有授权,我们就弹窗引导用户去设置页。去设置页的方法如下

 // 打开权限设置页提示框
 showSettingToast: function (e) {
  wx.showModal({   title: '提示!',   confirmText: '去设置',   showCancel: false,   content: e,   success: function (res) {    if (res.confirm) {
     wx.navigateTo({      url: '../setting/setting',
     })
    }
   }
  })
 },

8dd09494fdde024b1ead840d995ecda8.png

弹窗引导用户去设置页

由于去设置页,需要用户手动触发,这里我们就用一个setting.wxml页作为过过渡页。

3f97f751cc8e8f03b563fbf769ae3e71.png

过渡页

我们这个过渡页的按钮,用户点击后就会去真正的授权页了。

2ec0b4d9794f387d2e7a67d5a22d22b0.png

授权页

当用户开启地理位置授权后。我们再点击获取位置,就可以获取到用户当前的经纬度了。

9b7c69b6f1d1c9fc575fe30624369c48.png

获取到了经纬度

完整代码如下

//index.jsPage({
 getLocation() {  this.checkLocation();  let that = this;
  wx.chooseLocation({   success: function(res) {    var latitude = res.latitude    var longitude = res.longitude;
    that.setData({     address: "经纬度:" + longitude + ", " + latitude,
    })
   }
  });
 }, //校验位置权限是否打开
 checkLocation() {  let that = this;  //选择位置,需要用户授权
  wx.getSetting({
   success(res) {    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //这里提示失败原因
        title: '授权成功!',        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('需要授权位置信息');
      }
     })
    }
   }
  })
 }, // 打开权限设置页提示框
 showSettingToast: function (e) {
  wx.showModal({   title: '提示!',   confirmText: '去设置',   showCancel: false,   content: e,   success: function (res) {    if (res.confirm) {
     wx.navigateTo({      url: '../setting/setting',
     })
    }
   }
  })
 },
})

到此我们就实现了小程序引导授权的全部功能,并且可以获取到用户的位置经纬度了。是不是很简单。

加老师微信,获取源码

4f5922cbf42787ef24633d41b99faabd.png

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

weixin_39699313

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值