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 ~ -90
                        longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                        var speed = res.speed; // 速度，以米/每秒计
                        var accuracy = res.accuracy; // 位置精度
                        console.log(res);
                        console.log(latitude + ',' + longitude)
                        //that.address =longitude+','+latitude
                        that.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);
                }

            );
        },

结束语：

希望这篇文章能帮助到大家，如有不对之处，还请指正。愿我们一起成长。