大家好，又见面了，我是你们的朋友全栈君。

前言

最近遇到工作中遇到一个需求，当用户打开小程序时，小程序页面中对应的位置信息变为用户当前位置，且用户能更改当前地址信息；看到这个需求我想大部分人和我想到的就是使用微信官方API中的wx.getLocation来实现，通过它我们能拿到当前位置的经纬度，之后将经纬度转换为地址信息。

微信小程序—经纬度逆地址解析的实现「建议收藏」

第一步:

获取当前位置的经纬度，微信官方文档中明确指出在调用wx.getLocation前是需要用户授权的，我们需要考虑到当用户拒绝授权的情况发生，因此我的做法是直接调用wx.getLocation，在失败的回调中去处理用户未授权或者拒绝的情况，代码如下：

// 授权获取地址信息
checkAuth(callback) {
  wx.getLocation({
    type: 'gcj02',
    isHighAccuracy: true, // 开启高精度
    success(res) {
      // res 返回值 { accuracy: 65, errMsg: "getLocation:ok", horizontalAccuracy: 65, latitude: 22.53332, longitude: 113.93041, speed: -1, verticalAccuracy: 65 }
      callback(res);
    },
    fail: function(error) {
      wx.showModal({
        title: '是否授权当前位置',
        content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
        success: (res) => {
          if (res.confirm) {
            wx.openSetting({
              success: function (data) {
                if (data.authSetting["scope.userLocation"]) {
                  wx.getLocation({
                    type: 'gcj02',
                    isHighAccuracy: true,         // 开启高精度
                    success(res) {
                      // res 返回值 { accuracy: 65, errMsg: "getLocation:ok", horizontalAccuracy: 65, latitude: 22.53332, longitude: 113.93041, speed: -1, verticalAccuracy: 65 }
                      callback(res);
                    }
                  })
                } else {
                  wx.showToast({
                    title: '授权失败',
                    icon: 'success',
                    duration: 1000
                  })
                }
              }
            })
          }
        },
      })     
    }
  })
}

注: 这里有个小坑，我之前在开发者工具上调试，拿到的经纬度去做地址逆向解析始终不对，代码查了又查，一次又一次的debugger弄了2小时都没解决，之后在开发者社区中看到网友给的说法是开发者工具中的经纬度是错的，但是手机上不会，经测试ok；在这里要感谢这位网友。

第二步:

在没有查阅相关文档之前一直以为，这类地址信息前端只需要拿到经纬度去调后端接口，后端返回前端想要的数据，地址的逆向解析是由后端来做的，也是在查阅相关文档的过程中看到了微信官方提供的解决方案，腾讯位置服务之逆地址解析

我们首先需要申请开发者秘钥，申请完成我们将得到一个key

微信小程序—经纬度逆地址解析的实现「建议收藏」

根据官方文档我们需要下载微信小程序javascriptSDK并引入到项目中，

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: 'xxxx-xxxx-xxxx'    // 这里就是申请的key
});

// 获取地址信息
getAddressInfo() {
    var that = this;
    var location = {
        latitude: that.data.latitude,
        longitude: that.data.longitude
    };
  
    qqmapsdk.reverseGeocoder({
        location,
        get_poi: 1,        // 是否返回周边POI列表：1.返回；0不返回(默认)
        poi_options: "policy=2;radius=5000",
        success: res => {
          var res = res.result;

          that.setData({
            activeAddress: res.address,    // 当前经纬度解析的地址
            addressList: res.pois,         // 附近的地址列表信息
          });
        },
  
        fail: function(error) {
          console.error(error);
        },
  
        complete: function(res) {
          // console.log(res);
        }
    })
}

这里有几个坑需要注意poi_options的值中存在多个参数需要用”;”来隔开，第二个就是一定不要忘了在小程序中配置安全域名”https://apis.map.qq.com“，另外就是每个key的每个服务接口是存在限制的。

完整代码如下：

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'xxxx-xx-xxxx-xxxx'
    });

    this.getAddressInfo();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  // 授权获取地址信息
  checkAuth(callback) {
    wx.getLocation({
      type: 'gcj02',
      isHighAccuracy: true,         // 开启高精度
      success(res) {
        callback(res);
      },
      fail: function() {
        wx.showModal({
          title: '是否授权当前位置',
          content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
          success: (res) => {
            if (res.confirm) {
              wx.openSetting({
                success: function (data) {
                  if (data.authSetting["scope.userLocation"]) {
                    wx.getLocation({
                      type: 'gcj02',
                      isHighAccuracy: true,         // 开启高精度
                      success(res) {
                        callback(res);
                      }
                    })
                  } else {
                    wx.showToast({
                      title: '授权失败',
                      icon: 'success',
                      duration: 1000
                    })
                  }
                }
              })
            }
          },
        })     
      }
    })
  },

  // 获取地址信息
 getAddressInfo() {
    
    var that = this;
    that.checkAuth((res) => {

      var location = {
        latitude: res.latitude,
        longitude: res.longitude
      };
  
      qqmapsdk.reverseGeocoder({
        location: location,
        get_poi: 1,        // 是否返回周边POI列表：1.返回；0不返回(默认)
        poi_options: "policy=2;radius=5000",
        success: res => {
          var res = res.result;
          that.setData({
            activeAddress: res.address,
            addressList: res.pois
          });
        },
  
        fail: function(error) {
          console.error(error);
        },
  
        complete: function(res) {
          // console.log(res);
        }
      })
    })
  }
})

最近才发现又几年没写东西了，一直都是在忙做项目改bug，或者说是写bug? ? ? ，刚好今天不太忙，又碰巧想写点什么。

欢迎讨论交流，如果文章对您有一丝帮助，请不啬点赞哦。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/158827.html原文链接：https://javaforall.net

微信小程序—经纬度逆地址解析的实现「建议收藏」

前言

第一步:

第二步:

相关推荐

由真值表求逻辑表达式的方法是_与非门逻辑表达式

对象转map(object转map)

tracert工作原理简述_tracert三个时间

html空格代码_html中空格怎么表示

ARMv8 Linux内核异常处理过程分析「建议收藏」

prototype.js学习（1）

发表回复