vue 获取微信定位经纬度，并调用高德地图解析出详细地址

第一步：安装weixin-js-sdk，命令：npm i -S weixin-js-sdk 或者 npm install weixin-js-sdk

 

第二步：在需要的地方引用：

import wx from "weixin-js-sdk";

第三步：简单的封装了个获取地址方法，并暴露出来

/*
* 微信获取地址
* 获取微信加签信息
* @param{data}:获取的微信加签
* @param{data}:配置参数
*/
import wx from "weixin-js-sdk";

export const wxLocation = (data, cb, errorCb) => {
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: data.appId, // 必填，公众号的唯一标识
		timestamp: data.timestamp, // 必填，生成签名的时间戳
		nonceStr: data.nonceStr, // 必填，生成签名的随机串
		signature: data.signature, // 必填，签名
		jsApiList: ['checkJsApi','getLocation'] // 必填，
	});
	wx.checkJsApi({
		jsApiList: ['getLocation'],
		success: function (res) {
			if (res.checkResult.getLocation == false) {
				alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
				return;
			}
		}
	});
	wx.ready(function () {
		wx.getLocation({
			type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
			success: function (res) {
				cb(res)
			},
			fail: function (err) {
				errorCb(err);
			}
		});

	});
	wx.error(function (res) {
		// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
		console.log('验证失败返回的信息:', res);
	});
}

第四步：调用该方法

import { wxLocation } from "@/common/utils.js";

 //获取位置
        get_wz() {
            var that = this;
               //前端编码路径后，后端要相对应的解码，例如PHP的话要用urldecode
            var urls = encodeURIComponent(window.location.href.split('#')[0]);
            //本人跟后台协商好，我传页面url给后台，后台获取并返回微信config所需要的参数
            //nonceStr 这个参数要注意，你们可以跟后台协商好，注意大小写
            that.$axios.get("/xxx", {
                params: {
                    url: urls
                }
            }).then(res => {
                var code = res.data.code;
                switch (code) {
                    case 1001:
                        var result = res.data.result;
                        wxLocation(result, succ => { //成功
                            var latitude = succ.latitude; // 纬度，浮点数，范围为90 ~ -90
                            var longitude = succ.longitude; // 经度，浮点数，范围为180 ~ -180。
                            var accuracy = succ.accuracy; // 位置精度
                            //高德地图sdk，需要你在高德申请好
                            var mapurl = 'https://restapi.amap.com/v3/geocode/regeo?key=你的高德key&location=' + longitude + ',' + latitude + '&output=JSON&batch=false&roadlevel=0';
                            that.$axios.get(mapurl, {}).then(mapres => {
                                // console.log(mapres);
                                var rcd = mapres.data.regeocode;
                                //这个是具体的详细地址
                                that.addr = rcd.formatted_address;
                                
                            }).catch(function (maperr) {
                                console.log("error", maperr)
                            })
                        }, err => { //失败
                            console.log('验证失败：', err)
                        })
                        break;
                    default:
                        break;
                }
            }).catch(function (error) {
                console.log("error", error)
            })
        }

有不理解的地方欢迎在下方留言，觉得的可以的话点个赞喔，ღ( ´･ᴗ･` )

vue微信登录：vue 微信登录(使用了vant)_余温无痕的博客-CSDN博客

vue+vant商品列表批量倒计时:vue+vant商品列表批量倒计时_余温无痕的博客-CSDN博客_vant 封装