在element dialog中使用天地图报错Error in v-on handler: "TypeError: Cannot read property '_tdt_events' of null"

首先在html中需要有一个实例对象元素

<div id="mapDiv"></div>

然后在data中定义三个变量用于存储地图实例和经纬度

data（）{

　　map:null,

　　currentLng:116.4,

　　currentLat:39.9,

}

 

初始化天地图

initMap(){

      //初始化地图对象

      if(!this.map){　　　　　　　　//此判断因为map实例会被重复创建所以需要使用最新实例（这一判断其实我之前也想过，因为我是需要显示在dialog弹窗中，在取消关闭弹窗的时候将map变量实例置空，但再次打开弹窗，实际效果并未拿到最新实例，并且地图无法拖动，结果请求大佬之后才知道需要此判断）

          var marker;　　　　　　　//如果不加此判断，每次打开地图地图实例和覆盖物会被重复创建，会造成页面覆盖物重复并且地图无法拖动问题（因为鄙人使用是在element dialog框中，所以每次打开需重复创建实例，直接显示在页面中好像不会出现问题，各位可自行尝试）

          var zoom = 16;

          this.map = new T.Map("mapDiv");

      }

      this.map.clearOverLays();           // 清除地图中的覆盖物（因为实例和覆盖物会被重复创建最新的，所以在最新的生成前需要清除掉之前的）

      //设置显示地图的中心点和级别

      this.map.centerAndZoom(new T.LngLat(this.currentLng, this.currentLat), zoom);

      var point = new T.LngLat(this.currentLng,this.currentLat);

      marker = new T.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){

      var current = e.target

      if(current instanceof T.Marker){

　　　console.log(current.getLngLat().lng)　　　　//拖拽完后获取到经纬度之后你就可以开始自己的业务逻辑操作了

　　　console.log(current.getLngLat().lat)

      }else{

          console.log("无法获取该坐标位置");

      }

},

 

重点来了！！！↓ ↓ ↓

当我们调用地图时需要使用setTimeout做延迟

getMap() {

      setTimeout(()=>{

          this.initMap()

      },100)

},

鄙解（鄙人理解）：因为业务需要，需要将地图显示在弹窗中，elment diaplog的原理是通过v-if来实现的，需要重复的创建删除节点，当打开弹窗的一瞬间就调用地图实例，但弹窗中的dom元素还未生成，所以未获取到dom实例。

上面只是个人理解，对错未知，如有大佬懂之，并为之纠错，吾谢之！！