mpvue 小程序获取用户当前位置 - Go语言中文社区

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')
          }
        })

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

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_20074443/article/details/89711909
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢