vue使用腾讯地图

官方地址

先来展示效果图（输入框、文字就不管了自己写就行）

1、创建应用和Key

参照官方文档即可

2、页面引入

在public\index.html页面引入

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=xxxxxx"></script>

其中key绑定的值就是

可以上代码了

<div id='mapContainer' style="width:100%;height:500px"></div>

init() {       this.$nextTick(()=>{         //获取dom节点         var drawContainer = document.getElementById('mapContainer');         // var center = new window.TMap.LatLng(39.984104, 116.307503);//设置中心点坐标   lat: 23.228237   lng: 113.273747         //如果是回显的话直接把经纬度传进去就行         var center = new window.TMap.LatLng(this.latitude, this.longitude);         this.map = new window.TMap.Map(drawContainer, {           zoom: 18,           // pitch: 40,           center: center,           draggable: true,           scrollable: true,           mapStyleId: "style 1"         });         // 初始化marker         this.marker = new window.TMap.MultiMarker({           id: 'marker-layer', // 图层id           map: this.map,           geometries: [             {               "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id               "styleId": 'myStyle',  //指定样式id               "position": new TMap.LatLng(this.latitude, this.longitude),  //点标记坐标位置               "properties": {}             }           ]         })                  this.map.on("click", (evt) => {           console.log(evt.poi)           // this.searchValue = evt.poi.name           this.latitude = evt.poi.latLng.lat           this.longitude = evt.poi.latLng.lng           this.jingdu = evt.poi.latLng.lng           this.weidu = evt.poi.latLng.lat           // this.address = evt.poi.name           //点击地图进行标点           this.addPoint(this.latitude,this.longitude)            //逆地址解析，根据经纬度获取当前地址名称           this.getAreaCode()                         });       })            },  addPoint(latitude,longitude) {         //修改id为1的点标记的位置  点可以设置多个，我这里只需要一个因此修改就行         this.marker.updateGeometries([             {             "styleId":"myStyle",             "id": "1",             "position": new window.TMap.LatLng(latitude, longitude),             }         ])     }, //地址逆解析获取详细地址     getAreaCode( ) {     //这里可以直接this.$jsonp地址传入你的经纬度;       this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/?", {         location: this.latitude+ ',' + this.longitude, // 经纬度         key: "xxxxxx", //这里就是要开启那个service不然会报错让你开启         output: "jsonp", // output必须jsonp   不然会超时       }).then((res) => {       //获取到的res 就是继续的地址的所有信息;         console.log(res)       });     },