VueはBaiduマップを使用してInfoWindowのスタイルをカスタマイズします

効果

1.まず、Baiduマップ情報ウィンドウのクラス名を見つけ、クラス名に従ってスタイルを変更し

ます。ここでは、タイトルのスタイルのみを変更しました。

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

2.ウィンドウの中央のコンテンツのスタイルは、自分でラベルとスタイルを書くことです。

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);
            });

ここでの私のres.data.data [i] .meidは、バックエンドによって返されるパラメーター値です。アイデアはこれです。特定のスタイルは、必要に応じて変更できます。
それでも要件を満たせない場合は、公式ウェブサイトのケースであるInfoBoxを使用して情報ウィンドウをカスタマイズしてみてください。