1.根据微信api 获取经纬度,再通过腾地图专成地点名称
所以要先安装疼腾讯地图
2.安装命令
npm install qqmap --save
3.因为调用微信定位所以要在微信开发者工具上使用
4.项目使用element开发
<template>
</template>
<script>
export default {
data() {
return {};
},
methods: {
add() {
this.$router.push({ path: "/people", query: {} });
},
getSite() {
var then = this;
var url = window.location.href;
获取当前路径
var urls = url.substr(0, url.indexOf("#"));
this.$axios
.get(this.GLOBAL.myhf + "/wechat/getJsSdk?url=" + urls, {
withCredentials: true,
})
.then((res) => {
// 获取必要信息实例化地图
then.wx.config({
debug: false, // 开启调试模式,
appId: res.data.data.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.data.signature, // 必填,签名,见附录1
jsApiList: ["getLocation", "translateVoice"], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
then.wx.ready(function () {
then.wx.getLocation({
type: "gcj02",
success: function (res) {
// 获取经纬度
var latLng = new qq.maps.LatLng(res.latitude, res.longitude);
test.getAddress(latLng);
},
});
});
var thens = then;
// 调取腾讯地图
var test = new qq.maps.Geocoder({
complete: function (res) {
localStorage.setItem(
"place",
JSON.stringify(res.detail.addressComponents)
);
var info = {
didian: res.detail.nearPois[0].address,
};
localStorage.setItem("site", JSON.stringify(info));
},
});
});
},
},
mounted () {
this.getSite()
},
created() {},
};
</script>
<style lang="scss" scoped>
</style>```