微信小程序 实现多次调起授权位置弹框获取用户位置

微信小程序 实现多次调起授权位置弹框获取用户位置

需求：在小程序开发过程中通常需要获取用户的位置，有时会进入页面就要授权，有时点击某个按钮时需要授权。这时我们想到直接使用官方提供的wx.getLocation()来获取用户位置，但有个问题是这个接口只有在第一次进入小程序时或用户删除授权位置信息后才会调起授权弹框。那如果用户在第一次弹框时就点击了取消怎么办呢？下面给大家详细讲解如何多次调起授权弹框以便用户授权信息。

实现的思路、步骤：

1. 首先在页面onLoad()或者onShow()里边调用wx.getSetting()，获取到小程序的授权位置情况；
2. 如已授权，则调用wx.getLocation()更新位置信息；
3. 如未授权有两种情况：① 首次进入小程序或清除授权信息后进到该页面时，则会直接调用wx.getLocation()获取位置信息；② 用户在①情况下点击了取消按钮后，下次进到该页面或点击某个按钮需要调起授权框时，我们就需要调用自定义的授权弹框进行授权；
4. 当点击自定义授权框的确定按钮后，调用wx.openSetting()跳转到设置页面，用户点击允许返回即可授权；
5. 完成上面各步骤后用户即可在未授权位置的情况下多次调起授权弹框啦；

好啦！说完思路就上代码吧！迫不及待了~

js：

Page({
 /**
  * 页面的初始数据
  */
 data: {
   isShowLocationLayer:false,//是否显示自定义授权位置弹框
   locationInfo:{},//位置信息
 },

 //获取当前位置信息
 getLocationInfo: function (e) {
   var that = this;
   //获取当前位置信息
   wx.getLocation({
     type: 'gcj02',
     success(obj) {
       that.setData({
         locationInfo: obj,
       })
     }
   })
 },

 //授权位置按钮
 bindAuthLocation:function(e){
   var that = this;
   //获取授权结果查看是否已授权位置
   wx.getSetting({
     success: (res) => {
       if (res.authSetting['scope.userLocation'] == undefined && !res.authSetting['scope.userLocation']) //未授权位置（首次进来页面）
         that.getLocationInfo();//获取当前位置信息
       else if (res.authSetting['scope.userLocation'] === false) //未授权位置(点击官方授权弹框取消按钮后)
         that.setData({isShowLocationLayer: true})//显示自定义授权框
       else //已授权
         that.getLocationInfo();//获取当前位置信息
     }
   })
 },

 //定位授权框确认按钮
 bindConfirmLocation: function (e) {
   var that = this;
   //打开设置页面进行授权设置
   wx.openSetting({
     success: function (res) {
       if (res.authSetting['scope.userLocation']) {
         //获取当前位置信息
         that.getLocationInfo();
         that.setData({
           isShowLocationLayer: false,
         })
       }
     }
   });
 },

 //定位授权框取消按钮
 bindCancelLocation: function (e) {
   this.setData({
     isShowLocationLayer: false,
   })
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
   this.bindAuthLocation();//授权位置
 },
})

wxml：

<view class="main">
  <view class="main-location">经度：{{locationInfo.longitude}}  纬度：{{locationInfo.latitude}}</view>
  <button bindtap="bindAuthLocation" class="main-btn">授权位置</button>
  <!-- 自定义定位授权弹框 -- start -->
	<view class='context-layer' wx:if="{{isShowLocationLayer}}"></view>
	<view class='mask-layer' wx:if="{{isShowLocationLayer}}">
		<view class="box-content">
			<view class="content-title">"古夋科技"需要获取你的地理位置</view>
			<view class="content-txt">你的位置信息将用于位置显示</view>
		</view>
		<view class="box-bottom">
			<button class="btn-conmon btn-cancel" bindtap="bindCancelLocation">取消</button>
			<button class="btn-conmon btn-confirm" bindtap="bindConfirmLocation">确定</button>
		</view>
	</view>
  <!-- 自定义定位授权弹框 -- end -->
</view>