Problem with Baidu Map multiple information windows being displayed at the same time

1. First make it clear that Baidu Map’s own information window API can only open one at a time.

2. There are many posts on the Internet about the method of customizing the information window. I don’t know if I am using an offline map, but I haven’t implemented it anyway.

3. Here I will introduce to you my own solution. There should be no similar operations in the posts searched on the entire network. Let me show the renderings first.

4. Specific process

1). Initialize the map first, and use Baidu as the initialization method.

2).Core code

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) Screenshot of the actual code part

Initialize the map yourself Baidu

If the custom information window of Baidu Map is not good-looking, you can use this mounting method to replace it. Just hide all the information window styles of Baidu Map through style penetration.

Problem with Baidu Map multiple information windows being displayed at the same time

Guess you like