Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式

更新時(shí)間：2024年03月19日 10:24:16 作者：聽聽那晚風(fēng)

這篇文章主要介紹了Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

效果

1.首先可以找到百度地圖信息窗口的class名

根據(jù)class名去修改樣式

我這里只修改了標(biāo)題的樣式

//百度地圖信息彈窗標(biāo)題
.BMap_bubble_title{
  font-weight: 700!important;
  margin-bottom: 10px;
  font-size: 16px;
}

2.窗口中心內(nèi)容的樣式

是自己寫標(biāo)簽以及樣式

var marker = new BMap.Marker(new BMap.Point(112.14,22.125));
map.addOverlay(marker)
var opts = {
              width: 300, // 信息窗口寬度
              height: 150, // 信息窗口高度
              title: "設(shè)備信息", // 信息窗口標(biāo)題
              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'>手機(jī)號：</span>` +
                res.data.data[i].mobile +
                "<br/>" +
                `<span style='display:inline-block;width:60px; text-align: right;font-weight:700'>狀態(tài)：</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
            );
            //點(diǎn)擊標(biāo)注點(diǎn)要發(fā)生的事
            marker.addEventListener("click", function () {
              this.openInfoWindow(infoWindow);
            });
            // 鼠標(biāo)移開標(biāo)注點(diǎn)要發(fā)生的事
            marker.addEventListener("mouseout", function () {
              this.closeInfoWindow(infoWindow);
            });

我這里的res.data.data[i].meid 是后端返的參數(shù)值，思路就這樣，具體樣式根據(jù)自身需求去改變吧。

如果還實(shí)現(xiàn)不了需求可以嘗試用InfoBox自定義信息窗口，官網(wǎng)案例