|
前言
最近又用到了百度地图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风格代码如下：
/*地图标题 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');
}
在窗体内容部分写的就比较随意了，调到了一个合适的宽度（阴影也不会出现重叠或者缺色）后，避免里面内容太长而导致窗体变形，在bm-info-window下所有的div都规定了一个宽度。
|