百度地图多信息窗口同时显示的问题

1.先明确一点百度地图自带的信息窗口API一次同时只能打开一个。

2.自定义信息窗口方法网上有很多帖子，不知道是不是我用的是离线地图，反正我是没实现。

3.这边给大家介绍一个我自己的解决方法，全网内查询过的帖子里目前应该没有相似的操作，先上效果图。

4.具体流程 

1）.先初始化地图，初始化方法自己百度。

2）.核心代码

arr = ['经度'，'维度']
var poin = new BMapGL.Point(arr[0], arr[1])
//下面就是骚操作了
var opts = {
    position: poin, // 指定文本标注所在的地理位置
    offset: new BMapGL.Size(-65, -118) // 设置文本偏移量
};
//声明一个唯一值作为ID
var n = 'nnn'
//使用百度文本标注api
var label = new BMapGL.Label(`<div id="${n}"></div>`, opts);
//这边设置文本标注的内容区宽高
label.setStyle({
            width: '130px',
            height: '81px',
            backgroundColor: 'rgba(0,0,0,0)',
            borderColor: 'rgba(0,0,0,0)',
            fontSize: '16px',
            lineHeight: '30px',
});
//将标注添加到地图上
this.map.addOverlay(label);
//此时，上方的代码执行完后地图上就会有一个标注了，但是你什么也看不见，因为那个标注是一个空的
//<div id="${n}"></div>

//重点来了，因为他有一个唯一值ID，此时我们可以利用vue中$mount挂载的方式，将自己写的组件给挂载到
//<div id="${n}"></div>上

//此处需要注意的问题，第一因为他是挂载上去的，在关闭弹框的时候，befordestroy是不会触发的。
// 第二，因为他用的是原来的文本标注框，将原本的文本标注框内容换成我们的自定义内容，而文本标注框是
//没有那个信息窗口的关闭键的，所以关闭方法需要自己写

//开始挂载自定义组件
setTimeout(() => {
    //这个Vue是需要在当前页面引入的 import Vue from 'vue'
   new Vue({
       router: this.$router,
       store: this.$store,
       render: (h) =>
            // point_2这个是你的自定义组件，也要引入当前页面后才能使用
          h(point_2, {
            // props里面的item是你将当前的数据内容以父传子的方式，给到你的自定义组件
             props: { item: item, }
          })
    }).$mount('#' + n)//这边是你定义的唯一id
}, 200);

3）实际代码部分截图

 初始化地图自己百度

百度地图的那个自定义信息窗口不好看也可以使用这种挂载的方式去替换，只要通过样式穿透将百度地图自带的信息窗口样式全部隐藏起来就行。