微信小程序实例：获取当前城市位置及再次授权地理位置的代码实现

微信小程序实例：获取当前城市位置及再次授权地理位置的代码实现

微信小程序开发中，获取当前用户位置及再次授权地理位置是一项非常常见的需求，其实现方式也比较简单。本文将详细介绍如何在微信小程序中获取当前城市位置及再次授权地理位置。

1. 获取当前城市位置

在微信小程序中，我们可以通过调用微信提供的API来获取当前用户位置。具体的实现方式如下：

wx.getLocation({
  type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    wx.request({
      url: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=YourKey&output=json&coordtype=gcj02ll&location=' + latitude + ',' + longitude + '&extensions_poi=1',
      data: {},
      header: {
        'Content-Type': 'application/json'
      },
      success: function(res) {
        console.log(res.data.result.addressComponent.city);
      }
    })
  }
})

我们通过wx.getLocation()方法获取到当前位置的经纬度之后，再通过调用百度地图API将经纬度转化为具体地址，其中YourKey需要在百度地图开发者平台中进行申请。

需要注意的是，在调用wx.getLocation()时需要用户授权，否则将无法获取到用户位置信息。在小程序中，我们可以通过button按钮触发wx.getLocation()方法，实现获取位置授权：

<button type="primary" bindtap="getLocation">获取当前位置</button>

getLocation是我们定义的方法，具体代码如下：

getLocation: function () {
  var that = this;
  wx.getLocation({
    type: 'gcj02',
    success: function (res) {
      var latitude = res.latitude
      var longitude = res.longitude
      wx.request({
        url: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=YourKey&output=json&coordtype=gcj02ll&location=' + latitude + ',' + longitude + '&extensions_poi=1',
        data: {},
        header: {
          'Content-Type': 'application/json'
        },
        success: function (res) {
          that.setData({
            city: res.data.result.addressComponent.city
          })
        }
      })
    },
    fail: function () {
      // 用户未授权，跳转到授权界面
      wx.navigateTo({
        url: '/pages/authorize/authorize',
      })
    }
  })
},

在getLocation里，我们首先获取位置信息并将当前位置的城市名称存储到data中的city变量中，方便后续的展示和使用。同时，我们还需要添加授权失败的回调函数，在用户未授权时跳转到授权页面，进行再次授权。

2. 再次授权地理位置

当用户拒绝授权地理位置时，在进行再次授权时，需要在小程序中进行特殊处理。具体实现方式如下：

wx.getSetting({
  success(res) {
    if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
      wx.showModal({
        title: '请求授权当前位置',
        content: '需要获取您的地理位置，请确认授权',
        success: function (res) {
          if (res.cancel) {
            // 用户点击了取消
            wx.showToast({
              title: '拒绝授权',
              icon: 'none',
              duration: 1000
            })
          } else if (res.confirm) {
            // 用户点击了确定
            wx.openSetting({
              success: function (dataAu) {
                if (dataAu.authSetting["scope.userLocation"] == true) {
                  wx.showToast({
                    title: '授权成功',
                    icon: 'success',
                    duration: 1000
                  })
                  //再次授权，调用getLocationt的方法
                  that.getLocation();
                } else {
                  wx.showToast({
                    title: '授权失败',
                    icon: 'none',
                    duration: 1000
                  })
                }
              }
            })
          }
        }
      })
    } else if (res.authSetting['scope.userLocation'] == undefined) {
      // 用户首次进入页面，未进行授权
      that.getLocation();
    }
    else {
      // 已经授权过了
      that.getLocation();
    }
  }
})

在这段代码中，我们通过调用wx.getSetting()方法判断用户是否已经授权地理位置。如果用户已经授权，我们调用getLocation()方法获取当前位置；否则需要进行再次授权。

由于在小程序中进行授权需要用户主动操作，因此需要通过wx.showModal()弹出模态窗口进行提醒。当用户点击确定后，调用wx.openSetting()方法跳转到设置页面，进行再次授权。再次授权成功后，调用getLocation()函数获取当前位置信息。

总结

通过上述方式，在微信小程序中获取用户位置信息及再次授权地理位置并不难。需要注意的是，在实际开发中需要对用户授权的情况进行一定的处理，提高用户体验。

代码示例：

Page({
  data: {
    city: ''
  },
  onLoad: function () {
  },
  getLocation: function () {
    var that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        wx.request({
          url: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=YourKey&output=json&coordtype=gcj02ll&location=' + latitude + ',' + longitude + '&extensions_poi=1',
          data: {},
          header: {
            'Content-Type': 'application/json'
          },
          success: function (res) {
            that.setData({
              city: res.data.result.addressComponent.city
            })
          }
        })
      },
      fail: function () {
        // 用户未授权，跳转到授权界面
        wx.navigateTo({
          url: '/pages/authorize/authorize',
        })
      }
    })
  },
  getAuthorization: function () {
    var that = this;
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          wx.showModal({
            title: '请求授权当前位置',
            content: '需要获取您的地理位置，请确认授权',
            success: function (res) {
              if (res.cancel) {
                // 用户点击了取消
                wx.showToast({
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                })
              } else if (res.confirm) {
                // 用户点击了确定
                wx.openSetting({
                  success: function (dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: '授权成功',
                        icon: 'success',
                        duration: 1000
                      })
                      //再次授权，调用getLocationt的方法
                      that.getLocation();
                    } else {
                      wx.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 1000
                      })
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          // 用户首次进入页面，未进行授权
          that.getLocation();
        }
        else {
          // 已经授权过了
          that.getLocation();
        }
      }
    })
  }
})