前言

最近又用到了百度地图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

百度地图API——修改infowindow样式相关推荐

百度地图API : 修改marker图标(icon)
var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创 ...
百度地图api自定义修改地图背景样式
引入百度地图api就不用多说了吧! https://developer.baidu.com/map/custom/ //这个网址可以去模拟修改百度地图样式当修改到心仪的样式时,点击生成JSON,就会 ...
百度地图API显示多个标注点的代码以及修改传参
引用的页面原始数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？
原文:[百度地图API]如何调整结果面板的样式?如何获取指定页码的结果? 摘要: 1.你是否想自定义查询后,结果面板的显示样式? 2.数据接口每次只返回10条结果,如何取到单独每一页的结果? ---- ...
百度地图api之固定标记点(标记点自己设置样式)
一.首先引入所申请的ak密钥 <script type="text/javascript" src="http://api.map.baidu.com/api?ak ...
百度地图API开发指南
百度地图API开发指南本文为百度地图API官方版本的开发指南,供各位51CTO的网友进行参考. 简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮 ...
baidumap api MySQL_百度地图API
本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章. 1.打开链接http://developer.baidu.com/map/jshome.htm 这里有很 ...
引用百度地图API完成热力图
近期肺炎疫情信息闹的火热,就该情况完成来沪人员分布热力图以及标注确诊患者足迹.就开发研究中遇到的问题以及解决方案做一下记录,如下所示: 一.效果示意图简述完成效果:百度地图引入,增加热力图,添加比例 ...
百度地图API的基础使用
文章目录地图初始化创建普通地图创建GL地图为GL地图设置3D视角为地图添加比例尺/缩放控件点标记添加点标记添加窗体点标记添加点击事件自定义窗体行政区划图简易的行政区划图层指定 ...

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

前言

在原来基础上修改CSS样式

重写自定义覆盖物

总结

百度地图API——修改infowindow样式相关推荐

最新文章

热门文章