资讯详情

在element dialog中使用天地图报错Error in v-on handler: “TypeError: Cannot read property ‘_tdt_...

首先在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实例。

以上只是个人理解,对错未知,如果有大佬理解并纠正错误,我谢谢!

标签: tdt1对射型光电开关传感器tdt2对射电眼传感器

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台