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

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

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

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

在element dialog中使用天地图报错Error in v-on handler: “TypeError: Cannot read property ‘_tdt_events‘ of null相关推荐

使用天地图报错Error in v-on handler: “TypeError: Cannot read property ‘_tdt_events‘ of null
地图官网获取服务许可key:国家地理信息公共服务平台天地图 vue使用天地图报错Error in v-on handler: "TypeError: Cannot read propert ...
在Linux中安装MySQL报错“error: Failed dependencies: mysql-community-libs(x86-32) ＞= 5.7.9 is needed by my“
异常在Linux中安装MySQL报错: 原因因为缺少相关的依赖,所以要先安装这些依赖才能安装MySQL成功. 解决 (注意:这种方法是错误的,安装后并不能启动MySQL成功) 在每个安装指令后面添 ...
【错误记录】Visual Studio 中编译 NDK 报错 ( error : cannot use ‘throw‘ with exceptions disabled )
文章目录一.报错信息二.解决方案一.报错信息使用 Visual Studio 2019 编译 Android NDK 项目 , 报错如下 : 已启动生成- 1>------ 已启动生成: ...
Eclipse中mvn install 报错error in opening zip file
报错信息 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile (de ...
使用spring-cloud-bus报错error occurred in message handler [org.springframework.integration.amqp.outbound
完整报错信息 error occurred in message handler [org.springframework.integration.amqp.outbound.AmqpOutbound ...
使用天地图报错Uncaught TypeError: Cannot read property '_tdt_events' of null
在使用天地图新建 map = new T.Map("mapDiv")时,报如题错. 原因 mapDiv 放在了div的class中,正确应该为div的id..吐血转载于:htt ...
mongodb中文件导入报错error inserting documents解决方法
相信很多新接触mongdb的朋友在导入数据时都或多或少的遇上些许问题,下面就我遇上的问题做个简单记录. 安装完MongoDB会自带个导入工具:mongoimport,导入的指令为 Usage:mong ...
CentOS7中启动Chrome报错ERROR:zygote_host_impl_linux.cc
网上查的解决了问题 1. 需要安装libexif 说明我已经安装了libexif 2. 从安全角度考虑,Chrome不应在root环境下运行,如果某些原因必须以root身份运行Chrome,可以运行下 ...
安装32位mysql报错_在CentOS中安装32位或64位MySql报错error: Failed dependencies解决办法...
在CentOS中安装MySql报错error: Failed dependencies解决办法安装64位MySql报错内容如下: error: Failed dependencies: libaio ...

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

在element dialog中使用天地图报错Error in v-on handler: “TypeError: Cannot read property ‘_tdt_events‘ of null相关推荐

最新文章

热门文章