1. 百度地图API“自定义”信息窗口样式
    1. 利用API自定义的内容块覆盖
    2. 利用CSS的优先级覆盖
    3. 寻找DOM节点规律，js驱动修改样式

百度地图API“自定义”信息窗口样式

首先看一下起点样式和目标样式

默认

默认

需求

需求

说到样式，我在解决这个需求的时候一共想了三个方案（按产生时间排序）：

  1. 利用API自定义的内容块覆盖

    首先说这个方案很明显的一个缺点，无法实现透明。

    控制台分析HTML，父级节点样式是position属性进行定位的，所以可以通过z-index属性进行覆盖。然后我把值写了“10000000”发现毫无效果。

    本方案终结

  2. 利用CSS的优先级覆盖

    在控制台中寻找相关节点的类名，发现信息框由四个角落的块、中间三大块组成。还有一些没影响的img。但是，四个角落的div上好像没有class属性（Exm？）。

    本方案终结

  3. 寻找DOM节点规律，js驱动修改样式

    此方案完美解决需求样式

    通过自定义的内容定位，用js来获取四个角落的块、中间三大块的节点，并使用display隐藏掉。

    剩下样式的书写什么的就不多说了，自己慢慢调试。如果还不懂直接分析一下下面的代码。

    //为代码简洁，使用了JQueryAPI
var sContent = "<div id="pos"></div>";
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(point);
var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
map.centerAndZoom(point, 15);
map.addOverlay(marker);
marker.addEventListener("click", function(){    
   var posP=$($($("#pos").parent('div')).parent('div')).siblings();
    for(let i=0;i<7;i++){
        posP[i].css({"display":none});
    }
    posP[7].css({"top":"0","left":"0"});
    //此地方修改关闭按钮位置，如需修改样式，做成图片修改src路径即可
    //修改其它样式
    ...
   this.openInfoWindow(infoWindow);
}