百度地图API——修改infowindow样式

前言

最近又用到了百度地图api，之前用到的是百度地图js api的写法，需要一个个定义对象，添加事件或者监控，最后画到地图上，时不时还有渲染时序不对的情况，非常的不友好。所以这次用了vue Baidu Map，基于百度地图 JS API 开发的开源库的封装，减少了代码量，虽然文档部分封装和说明文档不是友好，但交互性相比之前的好多了。
用到了的覆盖物较多，信息窗体infowindow——直角边框加白底黑字，那么的 普通 ，肯定要修改一下，可是封装好的vue组件也不支持直接给style换底色和圆角，参阅其他文章的学习与不断调试后，最终效果如下所示，算是达到预期，大概也归结了两种方法。

在原来基础上修改CSS样式

总的来说就是修改这个窗体的风格样式，新样式加 !important 覆盖掉旧样式。
想法不错，但这个窗体写的属实有点复杂了，通过审查解析窗体结构，发现官方的信息窗口内部是由9个div组成的！分别是左上小正方体（1），上顶部（2），右上小正方体（3），中间主体内容部分（4），左下小正方体（5），下底部（6），右下小正方体（7），回到主体部分的一个div（8），最下面指向点的箭头（9）。而且官方没有给它们绑定任何的类名或id。所以我们找到它们的父级标签使用序选择器，直接修改。
还有一点不得不提，我本以为最下方的箭头是用css画成的箭头，结果居然是张图片，没办法，只能把原图下方原有的箭头替换一下颜色，然后代替一下原图片。

主要的css风格代码如下：

<style>

/*地图标题 infoWindow*/
.BMap_bubble_title{
  color:#fff;
  font-size:18px;
  /*font-weight: bold;*/
  text-align:left;
  background:transparent !important;
}

.BMap_pop .BMap_top{
  background:#3F4358 !important;
  border:0 !important;
}
.BMap_pop .BMap_center{
  width:251px !important;
  border:0 !important;
  background:#3F4358 !important;
}
.BMap_pop .BMap_bottom{
  border:0 !important;
  background:#3F4358 !important;
}

.BMap_pop div:nth-child(3){
  background:transparent !important;
}
.BMap_pop div:nth-child(3) div{
  border-radius:7px;
  background:#3F4358 !important;
  border:0 !important;
}
.BMap_pop div:nth-child(1){
  border-radius:7px 0 0 0;
  background:transparent !important;
  border:0 !important;
}
.BMap_pop div:nth-child(1) div{
  background:#3F4358 !important;
}
.BMap_pop div:nth-child(5){
  border-radius:0 0 0 7px;
  background:transparent !important;
  border:0 !important;
}
.BMap_pop div:nth-child(5) div{
  border-radius:7px;
  background:#3F4358 !important;
}
.BMap_pop div:nth-child(7){
  background:transparent !important;
}
.BMap_pop div:nth-child(7) div{
  border-radius:7px;
  background:#3F4358 !important;
}

.BMap_pop div:nth-child(8) div{
  /*border-radius:7px;*/
  background:#3F4358 !important;
}
/*窗体阴影*/
.BMap_shadow div:nth-child(5) img{
  margin-left: -1100px !important;
}

.BMap_shadow div:nth-child(4){
  width: 262px !important;
}

/*下面箭头替换为自己本地修改过的*/
img[src="http://api0.map.bdimg.com/images/iw3.png"] {
  content: url('../img/Screen/arrow.png');
}
img[src="https://api.map.baidu.com/images/iw3.png"] {
  margin-top: -692px !important;
  filter: alpha(opacity=70);
  content: url('../img/Screen/arrow.png');
}
</style>

在窗体内容部分写的就比较随意了，调到了一个合适的宽度（阴影也不会出现重叠或者缺色）后，避免里面内容太长而导致窗体变形，在bm-info-window下所有的div都规定了一个宽度。

 <bm-info-window  title="工单详情" :position="{lng: point.lng, lat: point.lat}"  :show="point.showFlag" @close="infoWindowClose(point)" @open="infoWindowOpen(point)">

	<div style="color:#fff;font-size:16px;">
	   <div style="margin-top:5px;height: 2px; width:100%;background-color: #1981E1 !important;"></div>
	
	   <div style="margin-top:10px;width:220px">  异常区域：{{ point.regionName }}</div>
	   <div style="margin-top:5px;width:220px">  详细地址：{{ point.location }}</div>
	   <div style="margin-top:5px;width:220px">  严重程度：{{ point.severity }}</div>
	   <div style="margin-top:5px;width:220px">  上报人：{{ point.reporterName }}</div>
	   <div style="margin-top:5px;width:220px">  联系方式：{{ point.reporterPhone }}</div>
	   <div style="margin-top:5px;width:220px">  指派人：{{ point.orderPeopleStr }}</div>
	   <div style="margin-top:5px;width:220px">  故障开始时间：{{ point.repairStartTime }}</div>
	   <div style="margin-top:5px;width:220px">  详细信息：{{ point.information }}</div>
	 </div>
	
</bm-info-window>

重写自定义覆盖物

如果觉得改原有的样式太过繁琐的话，重写一个新的自定义覆盖物可能是个比较好的选择。我正好需要一个窗体展示简略信息，效果如下：

可以参考官方的教程https://dafrok.github.io/vue-baidu-map/#/zh/overlay/overlay，官方的推荐写法是二次封装成组件，这里我就不得不吐槽一下，封装的好一点不就可以不用二次封装了吗。首先是这个属性和事件都这么点，好歹能传个坐标啊；其次是覆盖物position 属性必须得用 “position: absolute;” ，不然会在最左上角放置覆盖物/汗

剩下的就比较简单了，在bm-overlay下加各种div，然后定义成自己想要的风格即可。

总结

确实，开源组件啥的自由度还是差些，想要达到自己的要求，还是得慢慢磨，好好看官方文档，不知道会被莫名其妙的bug卡住。
春节后的第一篇完成liao