百度地图 - 打开信息窗口错误：Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

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); // 打开信息窗口
}