本文主要是介绍vue cli3 微信获取地理位置 逆地址解析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、index.html 引入js
http://res.wx.qq.com/open/js/jweixin-1.2.0.js
二、通过config接口注入权限验证配置，通过wx.getLocation获得经纬度（后台返回签名信息）
mapFun() {var that = this,url = window.location.href,appId = that.appId;that.$http.get('/api/wxappservice/xx/xx/xx', {params: {url: url,appId: appId,}}).then(function(res) {console.log(res.data.data)that.wxMap(res.data.data.appid, res.data.data.timestamp, res.data.data.nonceStr, res.data.data.signature);}, (error) => {console.log(error);});},wxMap(appId, timestamp, nonceStr, signature) {var latitude = "";var longitude = "";var that=this;wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: appId, // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名jsApiList: ['checkJsApi', 'getLocation', 'getNetworkType', 'previewImage'] // 必填，需要使用的JS接口列表});wx.ready(function() {wx.getLocation({type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function(res) {latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。var speed = res.speed; // 速度，以米/每秒计var accuracy = res.accuracy; // 位置精度console.log(res);console.log(latitude + ',' + longitude)//that.address =longitude+','+latitudethat.getLIst(longitude,latitude)that.addressFun(latitude,longitude)}, cancel: function(res) {//alert("用户拒绝授权获取地理位置经度="+longitude+"，纬度="+latitude);}});});},注意：wx.getLocation方法 type: 'gcj02' gcj02获取的地理位置相对准确
三、调用腾讯逆地址解析接口 ，解析为当前具体地址信息
//代理txMap为https://apis.map.qq.com 申请key值详见腾讯开发文档
addressFun(lat,lng){var that=this;var location=lat+','+lng;that.$http.get('/txMap/ws/geocoder/v1/', {params: {location:location,get_poi: 0,key:'你的key'}}).then(function(res) {console.log(res)//具体的地址信息that.address=res.data.result.address;}, (error) => {console.log(error);});},结束语：
希望这篇文章能帮助到大家，如有不对之处，还请指正。愿我们一起成长。
这篇关于vue cli3 微信获取地理位置 逆地址解析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
