vue中使用腾讯地图

要实现的功能大概是下面这个样子这个项目,一个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

  }

},