微信小程序中实现定位以及逆地址解析

前言

在微信小程序开发中，我们可以提前获取用户的地理位置，为用户提供更好的服务，因此我们今天就来实现一下。

一、原理

通过微信小程序的开发文档，我们可以发现 wx.getLoaction 能够获取到用户所在位置的经纬度，并且通过腾讯地图提供的逆地址解析中可以将经纬度信息还原成城市名称。在实际开发当中，我们可以分为两个部分，一个是腾讯地图 key 的获取，另一个是微信开发端的编码。

二、腾讯地图 key

创建一个腾讯地图的账号。（需要手机号和邮箱号）腾讯地图官网
登录成功之后可以点击右上角的控制台就会出现下图的界面，点击创建应用数量，进入到应用的管理页面。

在这里插入图片描述

创建一个应用.。（应用名称、应用类型如实填写即可）
随即在我的应用中会显示刚刚创建的，点击添加 key
信息如实填写就可以了，注意：启用产品选项要勾选 WebServiceAPI 和微信小程序，如果忘记勾选的也可以在创建 key 之后重新编辑配置。APPID需要到微信小程序网站查阅
添加成功之后，在创建好的应用可以看到 key。

二、编码

1. App.json

json

"permission": {
  "scope.userLocation": {
    "desc": "为了更好的服务体验，我们希望获取你的位置"
  }
}

2. JavaScript

// 这里我选择在onShow中触发，可以根据具体情况设置触发事件
data: {
  locationObj: {}
}

onShow: function () {
  // 调用定位方法
  this.getUserLocation();
},

// 定位方法
getUserLocation: function () {
  let _this = this
  wx.getLocation({
    type: 'gcj02', // type有两中类型，gcj02 是腾讯地图所能解析的
    success: res => {
      _this.setData({
        locationObj: res
      })
      // 调用获取城市名称方法
      _this.getCity()
    }
  })
},

// 获取定位城市名称方法
getCity: function () {
  var _this = this
  wx.request({
    url: `https://apis.map.qq.com/ws/geocoder/v1/?key=key填写的位置&location=`+ _this.data.locationObj.latitude + ',' +_this.data.locationObj.longitude,
    success: res => {
      console.log(res) // 此处返回的就是需要查询的城市名称
    }
  })
},

3. 返回值

逆地址解析之后的返回值如下：

在这里插入图片描述

总结

综上所述，便是今天介绍的微信小程序中定位及逆地址解析的实现方式。更多的参数信息，可以查阅本文末的开发文档链接。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，感谢您的观看！

微信开发文档：wx.getLocation(Object object)

腾讯开发文档：逆地址解析

原文链接：JhouXu 博客

微信小程序中实现定位以及逆地址解析 ​

前言 ​

一、原理 ​

二、腾讯地图 key ​

二、编码 ​

1. App.json ​

2. JavaScript ​

3. 返回值 ​

总结 ​