<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>指挥平台</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/common.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.3&key=dda001fca15df0d91f991e4e3ad23dec"></script>
<script type="text/javascript" src="js/heatmapData.js"></script>
</head>
<style>
.ul_div{height:195px; overflow-y:auto;}
.ul_div{height:438px; overflow-y:auto;}
</style>
<body>
<div class="divQuery">
<img src="images/map.png" style="width:100%; height:100%;" />
<div class="body_div">
<h2 class="top_h2"><span></span></h2>
</div>
<div class="jiank_fl">
<div class="box box1">
<span class="but"></span>
<h3><span>非法停车报警</span><b>2</b></h3>
<ul>
<li>
<p class="fr p1">2018.1.29 11:33<br /><span>停车地点：梅林小区3号楼</span><br />1单元201住户-王五 13999444333</p>
<p class="p2"><img src="images/m2.png"></p>
<div class="null"></div>
</li>
<li>
<p class="fr p1">2018.1.29 11:33<br /><span>停车地点：梅林小区3号楼</span><br />1单元301住户-张三 13999444333</p>
<p class="p2"><img src="images/m2.png"></p>
<div class="null"></div>
</li>
</ul>
</div>
<div class="box">
<span class="but"></span>
<div>
<h3><span>火灾报警</span><b>2</b></h3>
<ul class="ul1">
<li>
<p class="fr p1">2018.2.29 11:33 <br /><span>梅林小区5号楼二单元火灾报警</span></p>
<p class="p2 p2_img"><img src="images/m1.png"/></p>
<div class="null"></div>
</li>
<!-- <li>
<p class="fr p1">2018.2.28 14:39 <br /><span>梅林小区3号楼一单元火灾报警</span> </p>
<p class="p2 p2_img"><img src="images/m1.png"/></p>
<div class="null"></div>
</li> -->
</ul>
</div>
</div>
</div>
<div class="index_fr">
<h2 class="top_h22"><dl id="timeRun"></dl></h2>
<p class="pm1"><span>消防感应基点总数</span><b>2333</b></p>
<p class="pm2"><span>电动车总数</span><b>98234</b></p>
<p class="pm3"><span>非法停车报警数</span><b>350</b></p>
<p class="pm4"><span>火灾报警数</span><b>2</b></p>
<dl class="rlt_btn"><span data='data'>热力图</span></dl>
</div>
</div>
<div id="container" class="map" tabindex="0" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;"></div>
<div class="button-group">
<input type="button" class="button" value="显示热力图" onclick="heatmap.show()"/>
<input type="button" class="button" value="关闭热力图" onclick="heatmap.hide()"/>
</div>
</body>
</html>
<script>
//加载地图
$(function(){
//点击热力图------------
$('.rlt_btn span').click(function(){
var ww=$(this).attr('data');
if(ww!=''){
$(this).attr('data','');
$(this).css('background','url(images/m_btn1.png) no-repeat right center');
heatmap.show();
}else{
$(this).attr('data','1');
$(this).css('background','url(images/m_btn.png) no-repeat right center');
heatmap.hide();
}
})
/*var mapObj;
mapObj = new AMap.Map('container', {
resizeEnable: true,
zoom: 11,
center: [117.10, 40.13]
});
function AddMarker(x, y, Content) {
marker = new AMap.Marker({
offset: new AMap.Pixel(-79, -68),
zIndex: 9999,
draggable: false,
raiseOnDrag: true,
position: new AMap.LngLat(x, y),
content: Content,
});
marker.setMap(mapObj);
}
var content = "<div class='map_img map_imgg'><div class='number1'><span>芳城园 3号楼1单元，火灾报警</span></div><img class='on' src='images/m11.png'></div>";
AddMarker(117.10, 40.13, content); */
//---------------------------------------------
var map = new AMap.Map("container", {
resizeEnable: true,
center: [121.233,37.519],
zoom: 18
});
var markers = [], positions = [[121.230653,37.518491],[121.230763,37.519721],[121.231586,37.519356],[121.232386,37.519656],[121.231886,37.518706],[121.231386,37.518256],[121.230653,37.519291], [121.232986,37.518956],[121.230663,37.518671], //dui
];
var markersv = [], positionsv = [[121.232182,37.51831],[121.230763,37.518571],[121.230763,37.515771],[121.230863,37.519521],[121.231826,37.519456],[121.231786,37.519656],[121.232386,37.518756],[121.230953,37.519291],[121.231193,37.519621]
];
//[[121.232363,37.519768], [121.232986,37.518956],[121.230663,37.518671],[121.231193,37.519621],[121.231886,37.518286]]; //禁止
var markersa = [], positionsa = [[121.232363,37.519768]]; //禁止1
var markersaa = [], positionsaa = [[121.231886,37.518286]]; //禁止2
var markersc = [], positionsc = [[121.231586,37.518756]];
var Content='<div class="marker-route marker-marker-bus-from"> <img class="half_img" src="images/m11.png" style="width:42px" /></div>'; //right
var Content3='<div class="marker-route marker-marker-bus-from"> <img class="half_img" src="images/m12.png" style="width:42px" /></div>'; //wrong
//var Content1="<div class='map_img map_imgg map_img_bg'><div class='number1'><span>万科假日风景47号二单元，非法停车报警</span></div><img class='on' src='images/m13.png'></div>"; //blue
var Content1="<div class='map_img map_imgg map_img_bg'><div class='number1'><span>万科假日风景47号二单元，非法停车报警</span></div><img class='on' src='images/m13.png'></div>"; //blue
var Content11="<div class='map_img map_imgg map_img_bg'><div class='number1'><span>万科假日风景46号三单元，非法停车报警</span></div><img class='on' src='images/m13.png'></div>"; //blue
var Content2="<div class='map_img map_imgg'><div class='number1'><span>万科假日风景40号三单元，火灾报警</span></div><img class='on img' src='images/m14.png'></div>"; //red
var conHtml = [{"htVal": '46号二单元'},{"htVal": '47号一单元'}];
function addMarker(p,c,m) {
for (var i = 0, marker; i < p.length; i++) {
markerr = new AMap.Marker({
map: map,
zIndex: 9999,
draggable: true,
offset: new AMap.Pixel(-42, -36),
raiseOnDrag: true,
cursor:'move',
position: p[i],
content: c,
});
m.push(markerr);
}
}
addMarker(positions,Content,markers);
addMarker(positionsv,Content3,markersv);
addMarker(positionsa,Content1,markersa);
addMarker(positionsaa,Content11,markersaa);
addMarker(positionsc,Content2,markersc); //火警
setTimeout(function(){
//$('.map_img_bg span').eq(0).html(conHtml[0].htVal);
/*for(var i=0;i<=2;i++){
console.log(conHtml[i].htVal);
$('.map_img_bg span').eq(i).html('万科假日风景'+conHtml[i].htVal+',非法停车报警');
} */
},180);
//---------------------------------------------
//----------热力图展示
if (!isSupportCanvas()) {
alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
}
//详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
//参数说明如下:
/* visible 热力图是否显示,默认为true
* opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
* radius 势力图的每个点的半径大小
* gradient {JSON} 热力图的渐变区间 . gradient如下所示
* {
.2:'rgb(0, 255, 255)',
.5:'rgb(0, 110, 255)',
.8:'rgb(100, 0, 255)'
}
其中 key 表示插值的位置, 0-1
指挥平台a.rar （67个子文件） 
指挥平台a css 
css.css 3KB common.css 21KB images 
se1.png 246B mbg.png 2KB video2.png 4KB light.png 3KB yzm.png 10KB close.png 1KB ic1.png 233B m3.png 1003B sq1.png 1KB rightt.png 1KB count_2.png 1KB leftt.png 1KB m2.png 2KB aa1.png 943B ma1.png 587B logo.png 21KB count_1.png 1KB ma3.png 566B ck_3.png 1KB le2.png 1KB i3.png 471B le22.png 1KB titlebg.png 3KB m11.png 22KB bot.png 1KB re_2.png 1KB bg1.png 136B rk_ic2.png 1KB
rk_img3.jpg 100KB aa.png 944B bg2.png 339B i1.png 498B bg22.png 2KB ma2.png 902B m_btn1.png 2KB m13.png 20KB alogo.png 26KB bgg.png 5KB m12.png 22KB m_btn.png 951B m_time.png 629B m_bg1.png 2KB ck_4.png 1KB m14.png 14KB sea_1.png 1KB sea.png 1KB m4.png 2KB rk_ic1.png 1KB ic11.png 3KB t1.png 2KB i2.png 638B m_bg2.png 2KB sq2.png 1KB ic2.png 3KB notic_1.png 4KB abg1yy.png 5KB ri.png 1KB le1.png 1KB abg1.png 4KB m1.png 1KB le11.png 1KB js heatmapData.js 582B jquery.datePicker-min.js 18KB jquery.min.js 94KB
indexA2.html 10KB资源评论
小南瓜0
- 粉丝: 5
- 资源: 3
最新资源
- 基于SpringBoot的学生成绩管理系统.docx
- 智能车竞赛是指参赛者通过设计和编程，使自动驾驶的小车在指定的赛道上完成特定任务
- 基于SpringBoot的学生成绩管理系统.docx
- mathematical-modeling-master.zip
- 程序员问卷调查.docx
- 计网G32201何振浪 202151021665.zip
- Dev-C++的下载和安装教程（非常详细）从零基础入门到精通，看完这一篇就够了_devc+_dev c++-CSDN博客.url
- 三轴磁力计校准.docx
- 以下是该竞赛的教程和经验分享，帮助你了解比赛流程、准备方式、常用方法和策略
- CAD主流电气原理图，通俗易懂，合适工控爱好者学习，多套主流PLC电气图纸，有常见的污水处理厂控制，变频器控制，中央空调控制以及
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
