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

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

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值