微信小程序开发——小程序API获取用户位置及异常流处理完整示例

前言：

小程序需要添加一个定位功能，主要的就是获取用户位置的经纬度，然后根据用户经纬度进行一些判断操作。

在小程序提供的Api中，获取用户定位信息的主要Api是 wx.getLocation（obj） 。但是使用这个API，会先获取用户授权。如果用户取消授权，那么再调这个Api，也不会再出现授权页面，也就不能再获取用户位置了，这就需要使用其他的Api辅助打开授权页面了。所以获取用户位置就需要完整的授权、获取位置的流程及异常流处理了。

业务流程图：

关键技术点：

页面加载默认调用 wx.getLocation ,然后如果获取失败则调用 wx.getSetting ，如果未授权，则调用 wx.openSetting 打开授权设置界面，如果授权界面设置允许授权，则返回页面再次调用 wx.getLocation，主要的流程就是这个了。

示例代码：

const app = getApp()

Page({
  data: {
    hiddenReAuthorizePop:true,//隐藏重新授权确认弹窗
    latitude: "", //维度，浮点数
    longitude: "", //经度，浮点数
    content:"本活动需要获取位置才可以参加"
  },
  onLoad: function() {
    //1. 页面加载的时候获取定位
    this.getLocation()
  },
  /**
   * 1. 获取用户定位
   */
  getLocation: function() {
    var self = this;
    wx.getLocation({
      type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的坐标，可传入'gcj02'
      altitude: true, //传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
      success: function(res) {
        var latitude = res.latitude; // 纬度，浮点数
        var longitude = res.longitude; // 经度，浮点数
        self.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      },
      fail: function(res) {
        //未授权就弹出弹窗提示用户重新授权
        self.reAuthorize();          
      }
    });
  },
  /**
   * 1.2 重新授权按钮点击事件
   * click event   
   */
  openLocationSetting: function() {
    var self = this
    //先获取用户的当前设置，返回值中只会出现小程序已经向用户请求过的权限
    wx.getSetting({
      success: function(res) {
        if (res.authSetting && !res.authSetting["scope.userLocation"]) {
          //未授权则打开授权设置界面
          wx.openSetting({
            success: function(res) {              
              if (res.authSetting && res.authSetting["scope.userLocation"]) {                
                //允许授权,则自动获取定位，并关闭二确弹窗，否则返回首页不处理
                self.getLocation();
                self.setData({
                  hiddenReAuthorizePop:true
                })
                wx.showToast({
                  title: '您已授权获取位置信息',
                  icon: 'none'
                })
              }else{
                //未授权就弹出弹窗提示用户重新授权      
                self.reAuthorize();
              }
            }
          })
        } else {
          //授权则重新获取位置新（授权设置界面返回首页，首页授权二确弹窗未关闭）
          self.getLocation();
        }
      }
    })
  },
  /**
   * 重新授权
   */
  reAuthorize:function(){
    var self=this
    self.setData({ hiddenReAuthorizePop:false})
  }
})

 代码片段地址：https://developers.weixin.qq.com/s/uRMylxmO7e3Q

原创专业博客，转载请注明来源地址：https://www.cnblogs.com/xyyt/p/9871898.html