自定义百度地图InfoWindow样式

最近在做大屏的可视化开发的时候遇到需要自定义信息窗口的需求,但是百度地图自带的infoWindow虽然可以通过插入html字符串的形式自定义信息,但是它自带有白色背景,没有找到去掉其默认背景颜色的属性,所以通过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;
}

这里是把其四周的色块和关闭按钮都去掉了的,所以还要自定义关闭按钮

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

猜你喜欢

转载自blog.csdn.net/weixin_42252416/article/details/126408864