Use Baidu map API to set an overlay (infowindow) in the map to customize the window content

As the main backstage , The interface is ugly. , It doesn't work bootstrap,vue What? , It's simple css Style and html, This content can play by itself

Don't talk much , I'll just go straight to the code

html The code is as follows :

<div id="mapDiv" ></div>

 javaScript The code is as follows :

var map = new BMap.Map("mapDiv");
    var point = new BMap.Point(87.56498774,43.84038035);
    map.centerAndZoom(point,19);

var data = {};
    data.title=" Alarm personnel alarm ";
    data.point=point;
    showAlarmMessage(data,map);

// Display prompt message 
function showAlarmMessage(data,map){

    var content='<div class="alarmDiv">';
    content+='<table style="width:100%;height:100%;" border="1" cellpadding="0" cellspacing="0">';
    content+='<tr><td rowspan="4" style="width:80px;"><img src="/css/images/alarmLamp.gif" class="alarmPic"/></td>';
    content+='<td class="tabLabel"> full name </td><td class="tabText"> Li Er dog </td></tr><tr><td class="tabLabel"> ID number </td>';
    content+='<td class="tabText">412825465458452125</td></tr><tr><td class="tabLabel"> Place of incident </td>';
    content+='<td class="tabText"> At the east gate of Aolong square in the new urban area </td></tr> <tr> <td class="tabLabel"> Alarm equipment </td>';
    content+='<td class="tabText"> Access control at the east gate of Aolong square </td> </tr> <tr> <td colspan="3">';
    content+='<table border="1" class="childTab"><tr><th> Site photos </th><th> Warning photos </th></tr>' +
        '<tr><td align="center"><img src="/css/images/testPerson.jpg"/></td><td align="center">' +
        '<img src="/css/images/testPerson.jpg"/></td></tr></table></td></tr></table></div>';
    var opts = {
        width : 400,     //  Information window width 
        height: 300,     //  Information window height 
        title : data.title  //  Message window title 
    }
    var infoWindow = new BMap.InfoWindow(content, opts);//  Create information window object 
    map.openInfoWindow(infoWindow,data.point);//  Open the information window 
}

css The code is as follows :

.tabLabel {
    height: 24px;
    text-align: right;
    font-weight: bold;
    padding-right: 5px;
}

.tabText {
    padding-left: 5px;
}

.alarmPic {
    width: 80px;
    height: 80px;
}

.childTab {
    width: 100%;
    height: 100%;
}

.childTab th {
    text-align: center;
    height: 30px;
}

.alarmDiv {
    width: 400px;
    height: 275px;
}
.BMap_bubble_title{
    text-align: center;
    font-weight: bold;
    color:red;
    font-size: 15pt;
}

In this way, it can be on the map point The position shows an information window , The effect is as follows :