Vue uses Baidu Maps to customize the style of InfoWindow

Effect
Insert picture description here
1. First, you can find the class name of the Baidu map information window, and modify the style according to the class name.

I only modified the style of the title here.

//百度地图信息弹窗标题
.BMap_bubble_title{
    
    
  font-weight: 700!important;
  margin-bottom: 10px;
  font-size: 16px;
}

2. The style of the center content of the window is to write labels and styles by yourself

var marker = new BMap.Marker(new BMap.Point(112.14,22.125));
map.addOverlay(marker)
var opts = {
    
    
              width: 300, // 信息窗口宽度
              height: 150, // 信息窗口高度
              title: "设备信息", // 信息窗口标题
              message: "",
            };
            var infoWindow = new BMap.InfoWindow(
              `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>MEID：</span>`+res.data.data[i].meid+
                "<br/>" +
                `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>手机号：</span>` +
                res.data.data[i].mobile +
                "<br/>" +
                `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>状态：</span>` +
                res.data.data[i].devStatusStr +
                "<br/>" +
                `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>版本：</span>`+
                res.data.data[i].osVersion +
                "<br/>" +
                `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>性能：</span>`+
                "CPU:" +
                res.data.data[i].perCpu +
                "&nbsp&nbsp" +
                "RAM:" +
                res.data.data[i].perRam +
                "&nbsp&nbsp" +
                "DISK:" +
                res.data.data[i].perDisk,
              opts
            );
            //点击标注点要发生的事
            marker.addEventListener("click", function () {
    
    
              this.openInfoWindow(infoWindow);
            });
            // 鼠标移开标注点要发生的事
            marker.addEventListener("mouseout", function () {
    
    
              this.closeInfoWindow(infoWindow);
            });

My res.data.data[i].meid here is the parameter value returned by the backend, the idea is this, the specific style can be changed according to your own needs.
If you still can’t meet your requirements, you can try to customize the information window with InfoBox , the official website case
Insert picture description here

Vue uses Baidu Maps to customize the style of InfoWindow

Guess you like