使用百度地图API在地图中设置一个覆盖物(InfoWindow),可自定义窗口内容
由于主做后台方面的,界面很丑,也没有用bootstrap,vue什么的,就简单的css样式和html,这个内容可以自行发挥咯话不多说,我就直接上代码了html代码如下:<div id="mapDiv" ></div> javaScript代码如下:var map = new BMap.Map("mapDiv&qu
·
由于主做后台方面的,界面很丑,也没有用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位置显示一个信息窗口啦,效果如下图:
更多推荐
已为社区贡献1条内容
所有评论(0)