<%@ 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:400px;
|
top:30px;
|
right:30px;
|
position:absolute;
|
z-index:1;
|
border:2px solid red;
|
background-color:gainsboro;
|
opacity: 0.8;
|
}
|
#cpm,#cpm1{
|
width: 300px;
|
height: 100px;
|
position: absolute;
|
background-color: #ffffff;
|
display: none;
|
left: 50%;
|
top: 50%;
|
margin-left: -150px;
|
margin-top: -50px;
|
z-index: 11;
|
color: #000000;
|
border: 2px solid #FF7F50;
|
font-size: 14px;
|
line-height: 100px;
|
text-align: center;
|
}
|
</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="mapParams" style="display: none;">
|
${requestScope.params}
|
</div>
|
</body>
|
|
</html>
|
<script type="text/javascript">
|
// 百度地图API功能
|
var map = new BMap.Map("allmap",{minZoom:14,maxZoom:19}); // 创建Map实例
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
var params = $.parseJSON($("#mapParams").html());
|
var point=new BMap.Point(params["ll"][0], params["ll"][1]);
|
map.centerAndZoom(point, 18.5); // 初始化地图,设置中心点坐标和地图级别
|
|
var icon1 = new BMap.Icon("/img/ico00.png", new BMap.Size(48, 48));
|
var mark1 = new BMap.Marker(new BMap.Point(params["ll"][0], params["ll"][1]), {icon: icon1});
|
map.addOverlay(mark1);
|
|
|
var icon2 = new BMap.Icon("/img/ico05.png", new BMap.Size(48, 48));
|
var mark2 = new BMap.Marker(new BMap.Point(116.885217,38.299148), {icon: icon2});
|
map.addOverlay(mark2);
|
var label = new BMap.Label("新华区沧县城建局国控站--distance="+params["mt"],{offset:new BMap.Size(20,-10)});
|
mark2.setLabel(label);
|
var icon3 = new BMap.Icon("/img/ico05.png", new BMap.Size(48, 48));
|
var mark3 = new BMap.Marker(new BMap.Point(116.87061,38.322828), {icon: icon3});
|
map.addOverlay(mark3);
|
|
var label = new BMap.Label("新华区环保局国控站--distance="+params["mt1"],{offset:new BMap.Size(20,-10)});
|
mark3.setLabel(label);
|
|
var icon4 = new BMap.Icon("/img/ico05.png", new BMap.Size(48, 48));
|
var mark4 = new BMap.Marker(new BMap.Point(116.855206,38.325162), {icon: icon4});
|
map.addOverlay(mark4);
|
|
var label = new BMap.Label("运河区电视转播国控站 --distance="+params["mt2"],{offset:new BMap.Size(20,-10)});
|
mark4.setLabel(label);
|
|
var polyline1 = new BMap.Polyline([
|
new BMap.Point(params["ll"][0], params["ll"][1]),
|
new BMap.Point(116.885217,38.299148)
|
], {strokeColor:"red", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
|
|
var polyline2 = new BMap.Polyline([
|
new BMap.Point(params["ll"][0], params["ll"][1]),
|
new BMap.Point(116.87061,38.322828)
|
], {strokeColor:"yellow", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
var polyline3 = new BMap.Polyline([
|
new BMap.Point(params["ll"][0], params["ll"][1]),
|
new BMap.Point(116.855206,38.325162)
|
], {strokeColor:"blue", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline1); //增加折线
|
map.addOverlay(polyline2); //增加折线
|
map.addOverlay(polyline3); //增加折线
|
|
|
//添加地图类型控件
|
map.addControl(new BMap.MapTypeControl({
|
mapTypes: [
|
BMAP_HYBRID_MAP,
|
BMAP_NORMAL_MAP
|
]
|
}));
|
map.setMapType(BMAP_NORMAL_MAP);
|
|
|
|
|
</script>
|
