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

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

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

html代码如下:

 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='
';
    content+='';
    content+='';
    content+='';
    content+='';
    content+='';
    content+='
姓名
李二狗
身份证号
412825465458452125
事发地点
新市区奥龙广场东门门口
 
 
报警设备
奥龙广场东门门禁
 
 
 
';
    content+='' +
        '
现场照片
预警照片
' +
        '
';
    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位置显示一个信息窗口啦,效果如下图: