<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
<%@page isELIgnored="false" %>
|
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
|
<style type="text/css">
|
body, html, #allmap {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
font-family: "微软雅黑";
|
}
|
#box {
|
width:300px;
|
height:500px;
|
top:80px;
|
right:30px;
|
position:absolute;
|
z-index:1;
|
border:2px solid red;
|
background-color:gainsboro;
|
opacity: 0.8;
|
}
|
</style>
|
<script type="text/javascript"
|
src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script>
|
<script type="text/javascript" src="/js/jquery.min.js"></script>
|
<script type="text/javascript" src="/js/utils.js"></script>
|
<script type="text/javascript">
|
if (typeof (JSON) == 'undefined') {
|
$.getScript("js/json2.js");
|
}
|
</script>
|
<script type="text/javascript" src="/js/paging.js"></script>
|
<title>地图展示</title>
|
</head>
|
<body>
|
<div id="allmap" style="z-index: 0" ;>
|
</div>
|
<div id="box">
|
<p>
|
<img src="/img/company_01.png" style="width: 30px;height: 30px;margin-left: 15px;"/> <span style="position: relative;top: -9px;"> --->烟道</span>
|
</p>
|
<p>
|
<img src="/img/company_02.png" style="width: 30px;height: 30px;margin-left: 15px;"/> <span style="position: relative;top: -9px;"> --->厂界</span>
|
</p>
|
<p>
|
<img src="/img/company_03.png" style="width: 30px;height: 30px;margin-left: 15px;"/> <span style="position: relative;top: -9px;"> --->车间</span>
|
<br/>
|
<br/>
|
</p>
|
<div id="purify">
|
</div>
|
</div>
|
<div id="mapParams" style="display: none;">
|
${requestScope.params}
|
</div>
|
</body>
|
|
</html>
|
<script type="text/javascript">
|
// 百度地图API功能
|
var map = new BMap.Map("allmap"); // 创建Map实例
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
var params = $.parseJSON($("#mapParams").html());
|
var longitude = params["longitude"];
|
var latitude = params["latitude"];
|
map.centerAndZoom(new BMap.Point(longitude, latitude), 17); // 初始化地图,设置中心点坐标和地图级别
|
// 将标注添加到地图中
|
|
$("#purify").append("<p style='margin-left: 15px;'>收集率：" + params["collectionRate"] + "</p>");
|
|
var device1 = params["device1"];
|
if (device1 != null) {
|
for (var i = 0; i < device1.length; i++) {
|
var icon1 = new BMap.Icon("/img/company_01.png", new BMap.Size(48, 48));
|
var mark1 = new BMap.Marker(new BMap.Point(device1[i].longitude, device1[i].latitude), {icon: icon1});
|
map.addOverlay(mark1);
|
}
|
}
|
|
var device2 = params["device2"];
|
if (device2 != null) {
|
for (var i = 0; i < device2.length; i++) {
|
var icon2 = new BMap.Icon("/img/company_02.png", new BMap.Size(48, 48));
|
var mark2 = new BMap.Marker(new BMap.Point(device2[i].longitude, device2[i].latitude), {icon: icon2});
|
map.addOverlay(mark2);
|
}
|
}
|
|
var device3 = params["device3"];
|
if (device3 != null) {
|
for (var i = 0; i < device3.length; i++) {
|
var icon3 = new BMap.Icon("/img/company_03.png", new BMap.Size(48, 48));
|
var mark3 = new BMap.Marker(new BMap.Point(device3[i].longitude, device3[i].latitude), {icon: icon3});
|
map.addOverlay(mark3);
|
}
|
}
|
|
|
//添加地图类型控件
|
map.addControl(new BMap.MapTypeControl({
|
mapTypes: [
|
BMAP_NORMAL_MAP,
|
BMAP_HYBRID_MAP
|
]
|
}));
|
</script>
|
