百度地图自定义信息窗口

百度地图自定义信息窗口样式：
直接贴代码：主要是css样式穿透
::v-deep .BMap_bubble_pop { padding: 0 !important; background: rgba(23, 70, 104, 0.6) !important; border: #174668 solid 1px !important; }
::v-deep .BMap_bubble_title { color: white !important; font-size: 14px; font-weight: bold; text-align: left; padding-left: 5px; border-top-left-radius: 10px; border-top-right-radius: 10px; background: rgba(23, 70, 104, 0.6) !important; opacity: 0.8; }
::v-deep .BMap_bubble_content { left: 4px; }

js页面

              let opts = {
                    width: 260,     // 信息窗口宽度
                    height: 220,     // 信息窗口高度
                    title: key.title, // 信息窗口标题
                    message: ""
                };
                let Content = `<div style="text-align: center">
                <img  style="margin-bottom: 5px;object-fit: cover;" id='imgDemo' src="` + key.imgUrl + `"width='239' height='204'/></div>`;
                let infoWindow = new BMapGL.InfoWindow(Content, opts);
                buildingMarker[index].addEventListener('click', function () {
                    this.openInfoWindow(infoWindow);
                    // 图片加载完毕重绘infoWindow
                    document.getElementById('imgDemo').onload = function () {
                        infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
                    };
                });

在自定义样式过程中，遇到一个小问题。弹框要求是透明的，而图片不能透明。刚开始设置的是整个弹窗opacity: 0 !important;然后图片也跟着出现透明。解决方法就是把背景颜色设置成RGB样式。第四个参数设置透明度。 这样： background: rgba(23, 70, 104, 0.6) !important;
最后再贴一个清除百度地图logo ::v-deep .anchorBL { display: none;}