1.在index.html中引用 腾讯api
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=PZSBZ-4H2RF-YNLJD-NKKE6-2UCI3-OTFT7"></script>
2.
引入dom结构
<el-form-item label="地址" prop="address" class ='addressDetail'>
<el-input v-model="contentForm.address" autocomplete="off" id="suggestId" name="address_detail"></el-input>
<div class="getAddress" @click="getAddressInfo()">获取位置信息</div>
<div style="color:#ccc">请输入详细街道地址</div>
</el-form-item>
<el-form-item label="获取定位">
<div>
<div id="allmap"></div>
<div>
经度<input type="text" v-model="longitude" disabled>
纬度<input type="text" v-model="latitude" disabled>
</div>
</div>
</el-form-item>
2.将element-china-map三级联单中的数据返回中文
getCityCode:function(value){
return CodeToText[value[0]]+CodeToText[value[1]]+CodeToText[value[2]]
},
3.先获取element-china-map中的省市区
handleChange(value) {
this.shengshiqu=this.getCityCode(value);
},
4.在mounted中调用腾讯地图
mounted() {
this.tencentMap()//调用腾讯地图
},
5.//初始化腾讯地图
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
});
},
6.//获取地址的详细信息并更新地图页面 需要获取到省市区
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)=>{
if(res.data.status==0){
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;
},
7发送数据的时候涉及到跨域
在package.json中加入
"proxy": {
"/place": {
"target":"https://apis.map.qq.com",
"changeOrigin":true,
"ws":true
}
},
