腾讯地图使用

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

  }

},