学做网站要学什么软件百度网盘电脑版下载
自定义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('lang.online')}}
{{$t('lang.alarm')}}
{{$t('lang.fault')}}
百度地图信息窗体主要由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{
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;
}
}
}
最终修改出来的信息窗体效果图如下，你可以根据自己的需要自行修改样式。
