自定義vue-baidu-map 組件的信息窗體infowindow（百度地圖信息窗體）

自定義vue-baidu-map 組件的信息窗體infowindow（百度地圖信息窗體）

需求在地圖上顯示具體的設備地址，點擊設備地址能看到具體的設備信息。

具體顯示效果如下：

但是百度地圖提供的信息窗體樣式太丑

自定義后樣式如下：

vue代碼如下：

<baidu-map
            class="map"
            :center="center"
            :zoom="zoom"
            scroll-wheel-zoom
            @ready="changeCenterAndZoom"
            :mapStyle="mapStyle"
        >
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        
            <div v-for="(item, index) in markers" :key="index">
                <bm-marker
                        :position="item.position"
                        :icon="item.icon"
                        @click="infoWindowOpen(item)"
                >
                    <bm-info-window
                            :show="item.show"
                            @close="infoWindowClose(item)"
                            @open="infoWindowOpen(item)"
                    >
                        <div class="info-window">
                            <div v-for="device in item.deviceInfo">
                                <div style="cursor: pointer; color: #fff;" @click="goDevice(device.gateway.mac)">{{$t('lang.device')}} {{device.gateway.mac}}</div>
                                <div style="margin-top:5px">
                                    <span style="color: red" v-if="device.status==0">{{$t('lang.offline')}}</span>
                                    <span style="color: #67c23a" v-if="device.status==1">{{$t('lang.online')}}</span>
                                    <span v-if="device.status==2">{{$t('lang.alarm')}}</span>
                                    <span v-if="device.status==3">{{$t('lang.fault')}}</span>
                                </div>
                                <el-divider></el-divider>
                            </div>
                            <div class="address">{{$t('lang.detail-site')}}:{{item.address}}</div>
                        </div>
                    </bm-info-window>
                </bm-marker>
            </div>

        </baidu-map>

百度地圖信息窗體主要由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;
        }
    }
   
}

最終修改出來的信息窗體效果圖如下，你可以根據自己的需要自行修改樣式。