自定义百度地图InfoWindow样式

最新推荐文章于 2025-05-21 08:30:00 发布

原创最新推荐文章于 2025-05-21 08:30:00 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

百度地图专栏收录该内容

3 篇文章

订阅专栏

在进行大屏可视化开发中，遇到百度地图infoWindow自定义需求。由于其自带白色背景，通过CSS去掉默认背景及边框，实现透明效果，并自定义关闭按钮事件，以实现更灵活的信息窗口展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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