最近在做大屏的可视化开发的时候遇到需要自定义信息窗口的需求,但是百度地图自带的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();
})
}