bminfowindow是什么_⾃定义vue-baidu-map组件的信息窗体
infowi。。。
⾃定义vue-baidu-map 组件的信息窗体infowindow(百度地图信息窗体)
需求在地图上显⽰具体的设备地址，点击设备地址能看到具体的设备信息。
具体显⽰效果如下：
但是百度地图提供的信息窗体样式太丑
⾃定义后样式如下：
vue代码如下：
class="map"
:center="center"
:
zoom="zoom"
scroll-wheel-zoom
@ready="changeCenterAndZoom"
:mapStyle="mapStyle"
>
:position="item.position"
:icon="item.icon"
@click="infoWindowOpen(item)"
>
:show="item.show"
@close="infoWindowClose(item)"
@open="infoWindowOpen(item)"
>
{{$t('lang.offline')}}
{{$t('line')}}
{{$t('lang.alarm')}}
{{$t('lang.fault')}}
{{$t('lang.detail-site')}}:{{item.address}}
百度地图信息窗体主要由9个主要的部分组成，分别是左上⼩正⽅体(1)，上顶部(2)，右上⼩正⽅体(3)，中间主体内容部分(4)，左下⼩正⽅体(5)，下底部(6)，右下⼩正⽅体(7)，回到主体部分的⼀个div(8)，最下⾯指向点的箭头(9)，这⾥描述⽐较抽象，可以⾃⾏审查元素查看。由于这些div没有具体的类名，所以就选择⼦代选择器的⽅式去修改。
.baidu-map {
.
BMap_bottom {
display: none;
}
.BMap_pop {
> div,
> img:nth-child(10) {
display: none;
overflow: unset;
}
> div:nth-child(9) {
display: block;
overflow: unset;
width: 340px !important;
}
> div:nth-child(8){
/*display: block;*/
}
.BMap_top {
display: none;
}
.BMap_center {
background: transparent;
border: none;
position: sticky !important;
height: 100%;
}
}
.BMap_bubble_content{border radius什么意思
background: rgba(0, 0, 0, .5);
border-radius: 5px;
padding: 20px;
.info-window{
padding-right: 8px;
width: 100%;
max-height: 280px;
overflow: auto;
.el-divider{
background: #ccccccbf;
}
.address{
color: #fff;
}
}
//⾃定义滚动条样式
.
info-window::-webkit-scrollbar{
width: 6px;
height: 1px;
}
.info-window::-webkit-scrollbar-thumb{
border-radius: 6px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.info-window::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 6px;
background: #EDEDED;
}
}
}
最终修改出来的信息窗体效果图如下，你可以根据⾃⼰的需要⾃⾏修改样式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。