首先在html需要一个实例对象元素
<divid="mapDiv"></div>
然后在data用于存储地图实例和经纬度
data(){
map:null,
currentLng:116.4,
currentLat:39.9,
}
天地图的初始化
initMap(){
//初始化地图对象
if(!this.map){ 因为这个判断map例子将被重复创建,因此需要使用最新的例子(我以前也想过这个判断,因为我需要显示它dialog在弹窗中,弹窗取消关闭时会关闭map变量实例是空的,但再次打开弹出窗口,实际效果没有得到最新的实例,地图不能拖动,结果要求老板知道这个判断)
varmarker; //如果没有此判断,每次打开地图实例和覆盖物,都会重复创建。会导致页面覆盖重复,地图不能拖动问题(因为我是用它的element dialog所以每次打开都需要重复创建实例,直接显示在页面上似乎没有问题,你可以自己尝试)
varzoom=16;
this.map=newT.Map("mapDiv");
}
this.map.clearOverLays();//清除地图上的覆盖物(因为例子和覆盖物将被重复创建,因此,在最新生成之前需要删除之前的)
///设置显示地图的中心点和级别
this.map.centerAndZoom(newT.LngLat(this.currentLng,this.currentLat),zoom);
varpoint=newT.LngLat(this.currentLng,this.currentLat);
marker=newT.Marker(point);//创建标注
this.map.addOverLay(marker);//在地图上添加标记
marker.enableDragging();//可拖拽
marker.addEventListener("dragend",this.dragMarker) ///这里为覆盖物添加拖拽事件,更多事件参考官网http://lbs.tianditu.gov.cn/api/js4.0/class.html
},
监控拖拉事件
dragMarker(e){
varcurrent=e.target
if(currentinstanceofT.Marker){
console.log(current.getLngLat().lng) //拖拽完后获取到经纬度之后你就可以开始自己的业务逻辑操作了
console.log(current.getLngLat().lat)
}else{
console.log("坐标位置无法获得");
}
},
调用地图时需要使用地图做延迟
getMap(){
setTimeout(()=>{
this.initMap()
},100)
},
鄙解(鄙解):由于业务需要,需要在弹窗中显示地图,elment diaplog原理是通过v-if为了实现这一点,需要重复创建删除节点打开弹出窗口时调用地图实例,但在弹出窗口中dom元素还未生成,所以未获取到dom实例。
以上只是个人理解,对错未知,如果有大佬理解并纠正错误,我谢谢!