要实现的功能大概是下面这个样子这个项目,一个table表点击编辑进入该页面
一.在index.html中引用地图
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=PZSBZ-4H2RF-YNLJD-NKKE6-2UCI3-OTFT7"></script>
二.省市区用的是element-china-area-data组件 如需要将code值转成中文可以使用CodeToText
1.安装 npm install element-china-area-data -S
2.在项目中引用
import {regionData, CodeToText}from "element-china-area-data";
dom结构
<el-cascader size="large" :options="options" v-model="contentForm.selectedOptions" @change="handleChange"> </el-cascader>
@change事件可以获取到该组件选择的code值，如果后端同事要求只需要传入省市区中的区时，可以在这个方法中进行处
三.腾讯地图
1.初始化腾讯地图
//初始化腾讯地图
tencentMap:function () {
var center =new qq.maps.LatLng(this.longitude,this.latitude);
var map =new qq.maps.Map(
document.getElementById('allmap'), {
center:center,
zoom:13,
draggable:true,
scrollwheel:true,
disableDoubleClickZoom:false
})
//创建一个Marker
var marker =new qq.maps.Marker({
//设置Marker的位置坐标
position:center,
//设置显示Marker的地图
map:map
});
},
2.点击获取地址信息更新地图页面 //this.shengshiqu是三级联单中的地址 this.contentForm.address是具体的地址信息
getAddressInfo() {
this.axios({
method:'get',
url:'https://bird.ioliu.cn/v1/?url=' +"https://apis.map.qq.com/ws/geocoder/v1/?address=" +this.shengshiqu +this.contentForm.address +"&key=PZSBZ-4H2RF-YNLJD-NKKE6-2UCI3-OTFT7",
dataType:'JSONP',
}).then((res) => {
console.log(res.data)
if (res.data.status ==0) {
console.log(res.data.result.location.lng);
console.log(res.data.result.location.lat);
this.longitude = res.data.result.location.lat;
this.latitude = res.data.result.location.lng;
this.tencentMap();//更新地图信息
}else {
this.longitude =0;
this.latitude =0;
}
})
return false;
},
3.发送数据的时候涉及到跨域
在package.json中加入
"proxy": {
"/place": {
"target":"https://apis.map.qq.com",
"changeOrigin":true,
"ws":true
}
},
