mpvue 小程序获取用户当前位置

前言

最近遇到一个需求需要在用户没有填写收货地址的情况下，点击立即购买立即生成收货地址，于是想到获取用户当前位置信息，将信息一一对应上即可。

实现步骤

1 获取用户位置信息

在需要的vue文件中调用下面的方法：

wx.getLocation({
      type: 'wgs84',
      success (res) {
        console.log(res, '地址')
        const lat = res.latitude
        const lon = res.longitude
        _this.getLocal(lat, lon)
      }
    })

注意：获取位置信息需要授权，在app.json中添加premission

"permission": {
    "scope.userLocation": {
      "desc": "位置信息"
    }
  }

2 通过传入的经纬度获取当前省市区及详细地址

getLocal (lat, lon) {
        let qqmapsdk = new QQMapWX({
          key: 'PKIBZ-PRXC4-ZRHUF-XQ6XH-AW2K7-F7FUM'
        })
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: lat,
            longitude: lon
          },
          success: function (res) {
            console.log(res, 'success')
          },
          fail: function (res) {
            console.log(res, 'fail')
          }
        })
      }

注意：第二部需要调用腾讯位置服务的jssdk,往下看

下载jssdk的前期准备

1 登录腾讯位置服务：https://lbs.qq.com/index.html
2 验证手机和邮箱：https://lbs.qq.com/console/user_info.html
3 申请密钥： https://lbs.qq.com/console/mykey.html

4 下载对应的jssdk

项目中引入jssdk

1将下载文件解压到项目的某个文件夹下，我放在了utils下面

2 对应的vue文件引入jssdk

注意：如果你加了eslint校验，当你引入时会报错，所以在源文件的头部添加/* eslint-disable */
3 如果你需要使用import引入的话，还需要将源文件最后的这句module.exports = QQMapWX;修改成export default QQMapWX;
4 实例化核心类

	let qqmapsdk = new QQMapWX({
          key: '这里是你申请的密钥，不是密钥名称，是一串码，你懂的~'
        })

5 通过qqmapsdk类将经纬度转换成具体的地址

qqmapsdk.reverseGeocoder({
          location: {
            latitude: lat,
            longitude: lon
          },
          success: function (res) {
            console.log(res, 'success')
          },
          fail: function (res) {
            console.log(res, 'fail')
          }
        })

这样一来我们就可以通过成功的回调将地址信息赋值给页面的省市区填充地址栏了，是不是很简单呢？