百度地图InfoWindow信息窗口的自定义和样式修改

最近捣腾百度地图，在做标志物点击事件显示信息窗口时，发现官方的信息窗口只给了固定的样式，且比较普通。那么该如何想修改成自己想要的样式？

1.在官方给出的原基础上进行修改

了解这种方法有助于你理解官方的信息窗口结构。这里我拿官方示例来进行举例：纯文字信息窗口
1.我们平时想要修改js生成的样式或者不是自己写的的样式时，需要找到其类名或者id名，然后在全局样式下进行修改。
2.所以我们直接打开控制台，解析结构，重点来了：发现官方的信息窗口内部是由9个div组成的，具体按照顺序分布情况是上面三个（左上、中间、右上（包括那个叉。。）），中间一个横向的div，下面三个（左下、中间、右下），第8个是最下面那个角，第九个又回到中间是个小的div。文字描述有些抽象，多在实例上看一看就熟悉了。

这里放出左上div

3.那么知道这些div定位在哪，事情就变得简单了，但是我相信你在查询上面部分div时又发现，官方没有给它们绑定任何的类名或id。所以我们找到它们的父级标签使用序选择器。
我们可以隐藏四个边角

/* 隐藏四个边角 */
.BMap_pop div:nth-child(1) {
     
	display:none;
}
.BMap_pop div:nth-child(3) {
     
	display:none;
}
.BMap_pop div:nth-child(5) {
     
	display:none;
}
.BMap_pop div:nth-child(7) {
     
	display:none;
}

Ps:在修改有些部分样式时，你需要加上!important（懂得自然懂）
这里贴出为数不多的在原样式上修改的博文：百度地图 BMap InfoWindow修改默认样式 Css

2.重写一个自定义覆盖物

我们不使用百度地图提供的InfoWindow这个API，完全自己写html和css。这部分要求比较深的代码功底。因为整个信息窗口的布局需要自己构思，且还需要弹出的信息窗口和标注点相对应，其中难免会出现一些bug。
重写方法和样式就相当开放了，这里写一下我针对导师代码思路解析：
1.
一些bug上的注意点：
1）点击标注弹出信息窗口后不能自动移动，信息窗口的部分在地图外面导致有时会看不到。我用了panTo()来解决，但交互性还是不好。
2）当鼠标移动至信息窗口上时，如果信息窗口下面又有图标则又会触发图标的事件，就又会弹出一个信息窗口。
这里贴出针对自定义覆盖物的博文:
官方文档自定义覆盖物
百度地图API-自定义图标覆盖物
百度地图API如何给自定义覆盖物添加事件

对比

第一种方法在于简单方便，但修改样式来说会非常麻烦，有时也很难达到自己想要的样式。除此之外，它还会影响地图上其他原始坐标的样式。
第二种方法则需要大量的代码重写，需要注重的点非常多，如果要注重交互性需要很多的考虑。但自己随意发挥，可以达到UI样式的还原。