<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAP</title>
<script type="text/javascript" src="<s:url value="/" />js/jquery.js"></script>
<script type="text/javascript" src="<s:url value="/" />js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<s:url value="/" />js/jquery.validate.min.js"></script>
<!-- 检测用户位置IP API -->
<script type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DqBFd4FXWonuaMNfGDRU0eEm"></script>
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL})); //右上角,仅包含平移和缩放按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN})); //左下角,仅包含平移按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角,仅包含缩放按钮
//后台获取数据
$.getJSON($('#baseUrl',window.parent.document).val()+'allTrayLocation.action',function(data){
var jsonData=eval("("+data+")");
arrayObj[0]="服务站:"+item.serviceStationName+"<br>";
arrayObj[0]=arrayObj[0] +"地址:"+item.provinceName+item.cityName+item.districtName+item.street;
arrayObj[1]=item.serviceStationId;
addClickHandler(arrayObj,marker);
});
function addClickHandler(arrayObj,marker){
marker.addEventListener("click",function(e){
var content=arrayObj[0];
content=content+ "<table class='gridtable'> <thead><tr><th>托盘类型</th>";
content=content+ "<th>数量</th></tr></thead><tbody>";
var param="gis.serviceStationId="+arrayObj[1];
//获取标注点详情内容
$.getJSON($('#baseUrl',window.parent.document).val()+'trayDetail.action',param,function(data){
var jsonData=eval("("+data+")");
$.each(jsonData, function(i, item) {
content=content +"<tr><td>" + item.palletTypeName + "</td>";
content=content +"<td>" + item.total + "</td></tr>";
});
content=content +"</tbody></table>"
openInfo(content,e)
});
});
}
//设置信息窗口打开时间
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
//设置消息窗口
var opts = {
title : "详情:" ,
enableMessage:false,
width : '0',
height: '0'
};
</script>
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAP</title>
<script type="text/javascript" src="<s:url value="/" />js/jquery.js"></script>
<script type="text/javascript" src="<s:url value="/" />js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<s:url value="/" />js/jquery.validate.min.js"></script>
<!-- 检测用户位置IP API -->
<script type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" ></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DqBFd4FXWonuaMNfGDRU0eEm"></script>
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
// 百度地图API功能
//创建对象
var map = new BMap.Map("allmap");
//获取中心坐标点
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL})); //右上角,仅包含平移和缩放按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN})); //左下角,仅包含平移按钮
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM})); //右下角,仅包含缩放按钮
//后台获取数据
$.getJSON($('#baseUrl',window.parent.document).val()+'allTrayLocation.action',function(data){
var jsonData=eval("("+data+")");
$.each(jsonData, function(i, item) {
// 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//设置标注点内容
var arrayObj = new Array();arrayObj[0]="服务站:"+item.serviceStationName+"<br>";
arrayObj[0]=arrayObj[0] +"地址:"+item.provinceName+item.cityName+item.districtName+item.street;
arrayObj[1]=item.serviceStationId;
addClickHandler(arrayObj,marker);
});
});
function addClickHandler(arrayObj,marker){
marker.addEventListener("click",function(e){
var content=arrayObj[0];
content=content+ "<table class='gridtable'> <thead><tr><th>托盘类型</th>";
content=content+ "<th>数量</th></tr></thead><tbody>";
var param="gis.serviceStationId="+arrayObj[1];
//获取标注点详情内容
$.getJSON($('#baseUrl',window.parent.document).val()+'trayDetail.action',param,function(data){
var jsonData=eval("("+data+")");
$.each(jsonData, function(i, item) {
content=content +"<tr><td>" + item.palletTypeName + "</td>";
content=content +"<td>" + item.total + "</td></tr>";
});
content=content +"</tbody></table>"
openInfo(content,e)
});
});
}
//设置信息窗口打开时间
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
//设置消息窗口
var opts = {
title : "详情:" ,
enableMessage:false,
width : '0',
height: '0'
};
</script>