Customize Baidu map InfoWindow style

Recently, when doing large-screen visualization development, I encountered the need to customize the information window. However, although the infoWindow that comes with Baidu Maps can customize information by inserting html strings, it has a white background and cannot be found. Remove the attribute of its default background color, so you can remove it by css

.BMap_pop>div {
  background: transparent !important;
  border: 0 !important;
}

.BMap_pop>div>div {
  background: transparent !important;
  border: 0 !important;
}

.BMap_pop>div>img {
  display: none;
}

.BMap_pop>img {
  width: 0 !important;
  height: 0 !important;
}

Here, the color blocks around it and the close button are removed, so the close button needs to be customized

var infoWindow = new BMap.InfoWindow(sContent);
          this.openInfoWindow(infoWindow);
          if (!infoWindow.isOpen()) {
            infoWindow.addEventListener("open", function () {
              $('.infor-close-icon').click(function () {
                console.log('点击了')
                _this.map.closeInfoWindow();
              })
            })
          } else {
            $('.infor-close-icon').click(function () {
              console.log('点击了')
              _this.map.closeInfoWindow();
            })
          }

Guess you like

Origin blog.csdn.net/weixin_42252416/article/details/126408864