使用百度地图API在地图中设置一个覆盖物(InfoWindow),可自定义窗口内容

由于主做后台方面的,界面很丑,也没有用bootstrap,vue什么的,就简单的css样式和html,这个内容可以自行发挥咯

话不多说,我就直接上代码了

html代码如下:

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

 javaScript代码如下:

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

var data = {};
    data.title="告警人员报警";
    data.point=point;
    showAlarmMessage(data,map);

//显示提示信息
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">姓名</td><td class="tabText">李二狗</td></tr><tr><td class="tabLabel">身份证号</td>';
    content+='<td class="tabText">412825465458452125</td></tr><tr><td class="tabLabel">事发地点</td>';
    content+='<td class="tabText">新市区奥龙广场东门门口</td></tr> <tr> <td class="tabLabel">报警设备</td>';
    content+='<td class="tabText">奥龙广场东门门禁</td> </tr> <tr> <td colspan="3">';
    content+='<table border="1" class="childTab"><tr><th>现场照片</th><th>预警照片</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,     // 信息窗口宽度
        height: 300,     // 信息窗口高度
        title : data.title  // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow(content, opts);// 创建信息窗口对象
    map.openInfoWindow(infoWindow,data.point);// 打开信息窗口
}

css代码如下:

.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;
}

这样就可以在地图上的point位置显示一个信息窗口啦,效果如下图: