1. 问题描述
自动切换并无问题,但是在手动关闭信息窗口后下一个窗口无法打开
报错信息:VM14220:1 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
2. 问题背景
- 需要实现轮询展示不同点位设备的信息,如下图
- 固定vue实例
var detailVue = new Vue({
el: '#detail_Wrapper',
data: {
details: ''
}
});
- 动态创建窗口
// 地图 - 展示详情, 接收详情信息和点
function pointDetail(details, point) {
var infoWindow = new BMap.InfoWindow(); // 创建信息窗口对象
detailVue.details = details; // 修改数据
infoWindow.setContent($('#detail_Wrapper')[0]); // 设置窗口内容
...
map.openInfoWindow(infoWindow, point); // 打开信息窗口
}
3. 原因
经过排查发现是设置窗口内容后并不是拷贝目标元素,而是直接使用了这个元素,而关闭这个窗口时会删除窗口中的元素,下一次要打开窗口时找不到目标元素,就会报错
-
未打开窗口时元素的位置
-
打开窗口后元素不见
4. 解决方法
在打开窗口时直接使用vue实例的根元素而不是动态获取页面中的元素
// 地图 - 展示详情, 接收详情信息和点
function pointDetail(details, point) {
var infoWindow = new BMap.InfoWindow(); // 创建信息窗口对象
detailVue.details = details; // 修改数据
... 关键代码
infoWindow.setContent(detailVue.$el); // 设置窗口内容
...
map.openInfoWindow(infoWindow, point); // 打开信息窗口
}