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結(jié)構(gòu)
<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">請(qǐng)輸入詳細(xì)街道地址</div>
</el-form-item>
<el-form-item label="獲取定位">
<div>
<div id="allmap"></div>
<div>
經(jīng)度<input type="text" v-model="longitude" disabled>
緯度<input type="text" v-model="latitude" disabled>
</div>
</div>
</el-form-item>
2.將element-china-map三級(jí)聯(lián)單中的數(shù)據(jù)返回中文
getCityCode:function(value){
? return CodeToText[value[0]]+CodeToText[value[1]]+CodeToText[value[2]]
},
3.先獲取element-china-map中的省市區(qū)
handleChange(value) {
this.shengshiqu=this.getCityCode(value);
},
4.在mounted中調(diào)用騰訊地圖
mounted() {
this.tencentMap()//調(diào)用騰訊地圖
},
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
? ? })
//創(chuàng)建一個(gè)Marker
? var marker =new qq.maps.Marker({
//設(shè)置Marker的位置坐標(biāo)
? ? position:center,
//設(shè)置顯示Marker的地圖
? ? map:map
? });
},
6.//獲取地址的詳細(xì)信息并更新地圖頁(yè)面? 需要獲取到省市區(qū)
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發(fā)送數(shù)據(jù)的時(shí)候涉及到跨域
在package.json中加入
"proxy": {
"/place": {
"target":"https://apis.map.qq.com",
"changeOrigin":true,
"ws":true
? }
},
