<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title></title>
	
<style type="text/css">
      #map_canvas { height:100%}
</style>
    <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&libraries=drawing&key=AIzaSyDZis631eei5VArZqB-lP2DDOSgPrhLR5A"></script>
	

	<script type="text/javascript"
			src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script>
	<script type="text/javascript" src="gpsonline/js/monitor/infobox.js"></script>
	<script type="text/javascript" src="<%=path%>/gpsonline/js/MianMap/MianMap.js"></script>
<script type="text/javascript">
   
   var arr=[];
   var map;
   var vehicles = [];
      function initialize(){
      	//alert('\n国家：'+remote_ip_info.country+'\n省份：'+remote_ip_info.province+'\n城市：'+remote_ip_info.city+'\n区：'+remote_ip_info.district+'\nISP：'+remote_ip_info.isp+'\n类型：'+remote_ip_info.type+'\n其他：'+remote_ip_info.desc + '\nIP段: ' + remote_ip_info.start + '-' + remote_ip_info.end);
      	var MinZoomLevel=4;
      	var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode( { 'address': remote_ip_info.city}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      	 map.setCenter(results[0].geometry.location);
      	 map.setZoom(8);
      } else { 
        //alert("Geocode was not successful for the following reason: " + status); 
      } 
    }); 
    var mapOptions = {
      center: new google.maps.LatLng(31.23, 121.47),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, "MAPabc"]
            }
    };
        map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
          addMAPabc(map);
         setInterval("al()",15000);
        var t;
        
        google.maps.event.addListener(map, 'drag', function(){
        	clearTimeout(t);
        	t=setTimeout("al()",500);
      	});
      	
      	google.maps.event.addListener(map, 'zoom_changed', function() {
        	
        	if (map.getZoom() < MinZoomLevel){
        		map.setZoom(MinZoomLevel);
        	} else{
        		clearTimeout(t);
        		t=setTimeout("al()",500);
        	}
      	});
         $.ajax({
	        type: "POST",
	        dataType: "json",
	        async:true,
	        url: "pub/onlineAction_latlng.action",
	        data: {},
	        success: function(data){
		      	if(data.flag==true){
		      		
			        for(i=0;i<data.data.length;i++){
			        	
			    		(function(x){
			    			 var myLatlng = new google.maps.LatLng(data.data[x].lng,data.data[x].lat);
							 var pngicon = "";
							 var speed = parseInt(data.data[x].speed);
							 if(speed>0){
								 pngicon = "<%=basePath%>gpsonline/image/pic/0/green_";
							 }else{
							 	 pngicon = "<%=basePath%>gpsonline/image/pic/0/red_";
							 }
							 var direction="";
							 var t = parseInt(data.data[x].direct);
							  if(t>27 && t<=72){
							  		var image="45.gif";
									direction="东北";
								}else if(t>72 && t<=117){
							  		var image="90.gif";
									direction="东";
								}
								else if(t>117 && t<=162){
							  		var image="135.gif";
									direction="东南";
								}
								else if(t>162 && t<=207){
									
							  		var image="180.gif";
									direction="南";
								}
								else if(t>207 && t<=252){
							  		var image="225.gif";
									direction="西南";
								}
								else if(t>252 && t<=297){
							  		var image="270.gif";
									direction="西";
								}
								else if(t>297 && t<=342){
							  		var image="315.gif";
									direction="西北";
								}
								else {
							  		var image="0.gif";
									direction="北";
								}
									var icon_size=real("0");
						    var marker = new google.maps.Marker({
							      position: myLatlng,
							      map: map,
							      icon: new google.maps.MarkerImage(pngicon+image, new google.maps.Size(icon_size, icon_size),new google.maps.Point(0,0),new google.maps.Point(10, 10))
							});
							
							var boxText = document.createElement("div");
							boxText.className = "map_tanchu_wrap";
							boxText.innerHTML = "<b class='xtop'>" +
											    	"<b class='xb1'></b>" +
											        "<b class='xb2'></b>" +
											        "<b class='xb3'></b>" +
											        "<b class='xb4'></b>" +
											    "</b>" +
											    "<div class='xboxcontent'><p>" +
												"<b>速度：</b>"+speed.toFixed(1)+"km/h </br>"
												+"<b>方向：</b>"+direction+"</br>"
												+"</p></div><b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b><span class='arrow_bg'></span><span class='arrow'></span>";
					var s2 = data.data[x].gpstime.replace("-","/");
					s2=s2.replace("-","/");
					s2=s2.replace("T"," ");
					//alert(s2);
					var time = (new Date().getTime()-new Date(s2).getTime());
							//计算出相差天数
					var days=Math.floor(time/(24*3600*1000));
					//计算出小时数
					var leave1=time%(24*3600*1000);    //计算天数后剩余的毫秒数
					var hours=Math.floor(leave1/(3600*1000));
					//计算相差分钟数
					var leave2=leave1%(3600*1000) ;       //计算小时数后剩余的毫秒数
					var minutes=Math.floor(leave2/(60*1000));
					 
					//计算相差秒数
					var leave3=leave2%(60*1000);     //计算分钟数后剩余的毫秒数
					var times="";
					if(days>0){
						times = times+""+days+" 天  ";
					}
					if(hours>0){
						times = times+hours +" 小时  ";
					}
					if(minutes>0){
						times = times+minutes+" 分钟   ";
					}
					var seconds=Math.round(leave3/1000);
							arr.push("设备名称：******　　"
							+"时间："+times+seconds+" 秒前　"
							+"方向："+direction+"　"
							+"速度： "+speed.toFixed(1)+" km/h");
							var myOptions = {
								 content: boxText
								,disableAutoPan: false
								,maxWidth: 0
								,pixelOffset: new google.maps.Size(-163, -100)
								,zIndex: null
								,boxStyle: { 
								 		  background: "no-repeat"
										  ,opacity: 1
										  ,width: "250px"
								 }
								,closeBoxMargin: "10px 25px 0px -20px"
								,closeBoxURL: "gpsonline/image/map/close.gif"
								,infoBoxClearance: new google.maps.Size(1, 1)
								,isHidden: false
								,pane: "floatPane"
								,enableEventPropagation: false
							};
							var infowindow = new InfoBox(myOptions);
							google.maps.event.addListener(marker, "mousemove", function (e) {
								for(var i=0;i<vehicles.length;i++){
							          vehicles[i].infowindow.close();
							    }
								infowindow.open(map, this);
								infowindow.show();
							});
							if(x==0){
								//infowindow.open(map, marker);
							}
							var vehicle = new Object();
						    vehicle.id = data.data[x].vehicleId;
							vehicle.marker = marker;
							vehicle.infowindow = infowindow;
							vehicle.latlng = myLatlng;
							vehicles.push(vehicle);
			    		})(i);
			         }
			         //alert(arr.length);
			         var ttt=setInterval(function(){
						 var sTxt=arr.shift();
						  if(sTxt!=null){
							  createDom(sTxt);
						  }
						 arr.push(sTxt);
					},3000);
				 }
	        },
	        error: function() {
	            
			    }
	   });     
}
function al(){
		   //alert(1);		
		   var p = new Object();
           p.leftLat = map.getBounds().getSouthWest().lat();
           p.leftLng = map.getBounds().getSouthWest().lng();
           p.rightLat = map.getBounds().getNorthEast().lat();
           p.rightLng = map.getBounds().getNorthEast().lng();
           $.ajax({
		        type: "POST",
		        dataType: "json",
		        async:true,
		        url: "pub/onlineAction_latlng.action",
		        data: {
		        'p.leftLat':p.leftLat,
		        'p.leftLng':p.leftLng,
		        'p.rightLat':p.rightLat,
		        'p.rightLng':p.rightLng},
		        success:function(data){
		        	//alert(data.data.length);
		        	//alert(p.leftLat+"  "+p.leftLng+"  "+p.rightLat+"  "+p.rightLng);
		        	if(data.flag==true){
		        	arr=[];
		         	for(var i=0;i<vehicles.length;i++){
						vehicles[i].infowindow.close();
						vehicles[i].marker.setMap(null);
					}
		         	for(i=0;i<data.data.length;i++){
			    		(function(x){
			    			 var myLatlng = new google.maps.LatLng(data.data[x].lng,data.data[x].lat);
							 var pngicon = "";
							 var speed = parseInt(data.data[x].speed);
							 if(speed>0){
								 pngicon = "<%=basePath%>gpsonline/image/pic/0/green_";
							 }else{
							 	 pngicon = "<%=basePath%>gpsonline/image/pic/0/red_";
							 }
							 var direction="";
							 var t = parseInt(data.data[x].direct);
							  if(t>27 && t<=72){
							  		var image="45.gif";
									direction="东北";
								}else if(t>72 && t<=117){
							  		var image="90.gif";
									direction="东";
								}
								else if(t>117 && t<=162){
							  		var image="135.gif";
									direction="东南";
								}
								else if(t>162 && t<=207){
									
							  		var image="180.gif";
									direction="南";
								}
								else if(t>207 && t<=252){
							  		var image="225.gif";
									direction="西南";
								}
								else if(t>252 && t<=297){
							  		var image="270.gif";
									direction="西";
								}
								else if(t>297 && t<=342){
							  		var image="315.gif";
									direction="西北";
								}
								else {
									
							  		var image="0.gif";
									direction="北";
								}
									var icon_size=real("0");
						    var marker = new google.maps.Marker({
							      position: myLatlng,
							      map: map,
							      icon: new google.maps.MarkerImage(pngicon+image, new google.maps.Size(icon_size, icon_size),new google.maps.Point(0,0),new google.maps.Point(10, 10))
							});
							var boxText = document.createElement("div");
							boxText.className = "map_tanchu_wrap";
							boxText.innerHTML = "<b class='xtop'>" +
											    	"<b class='xb1'></b>" +
											        "<b class='xb2'></b>" +
											        "<b class='xb3'></b>" +
											        "<b class='xb4'></b>" +
											    "</b>" +
											    "<div class='xboxcontent'><p>" +
												"<b>速度：</b>"+speed.toFixed(1)+"km/h </br>"
												+"<b>方向：</b>"+direction+"</br>"
												+"</p></div><b class='xbottom'><b class='xb4'></b><b class='xb3'></b><b class='xb2'></b><b class='xb1'></b></b><span class='arrow_bg'></span><span class='arrow'></span>";
							var s2 = data.data[x].gpstime.replace("-","/");
					s2=s2.replace("-","/");
					s2=s2.replace("T"," ");
					var time = (new Date().getTime()-new Date(s2).getTime());
							//计算出相差天数
					var days=Math.floor(time/(24*3600*1000));
					//计算出小时数
					var leave1=time%(24*3600*1000);    //计算天数后剩余的毫秒数
					var hours=Math.floor(leave1/(3600*1000));
					//计算相差分钟数
					var leave2=leave1%(3600*1000) ;       //计算小时数后剩余的毫秒数
					var minutes=Math.floor(leave2/(60*1000));
					 
					//计算相差秒数
					var leave3=leave2%(60*1000);     //计算分钟数后剩余的毫秒数
					var times="";
					if(days>0){
						times = times+""+days+" 天  ";
					}
					if(hours>0){
						times = times+hours +" 小时  ";
					}
					if(minutes>0){
						times = times+minutes+" 分钟   ";
					}
					var seconds=Math.round(leave3/1000);
					if(seconds<0){
						seconds=0;
					}
							arr.push("设备名称：****** "
							+"时间："+times+seconds+" 秒前 "
							+"方向："+direction+" "
							+"速度： "+speed.toFixed(1)+" km/h");
							var myOptions = {
								 content: boxText
								,disableAutoPan: false
								,maxWidth: 0
								,pixelOffset: new google.maps.Size(-163, -100)
								,zIndex: null
								,boxStyle: { 
										  background: "no-repeat"
										  ,opacity: 1
										  ,width: "250px"
								 }
								,closeBoxMargin: "10px 25px 0px -20px"
								//,closeBoxURL: "gpsonline/image/map/close.gif"
								,infoBoxClearance: new google.maps.Size(1, 1)
								,isHidden: false
								,pane: "floatPane"
								,enableEventPropagation: false
							};
							var infowindow = new InfoBox(myOptions);
							google.maps.event.addListener(marker, "mousemove", function (e) {
								for(var i=0;i<vehicles.length;i++){
							          vehicles[i].infowindow.close();
							    }
								infowindow.open(map, this);
								infowindow.show();
							});
							if(x==0){
								//infowindow.open(map, marker);
							}
							var vehicle = new Object();
						    vehicle.id = data.data[x].vehicleId;
							vehicle.marker = marker;
							vehicle.infowindow = infowindow;
							vehicle.latlng = myLatlng;
							vehicles.push(vehicle);
			    		})(i);
			         }
			         }
		         	 //alert(data.data.length)
		        },
	        	error: function() {
	          
			    }
	   });    					
}
//地图添加MAPabc
	function addMAPabc(map){//添加MAPabc的瓦片 参数为地图对象  
	    var _tileSize = new google.maps.Size(256,256);
	    var getTileUrl = function(tile,zoom){
	        return "http://emap" + ((tile.x + tile.y) % 4) + ".mapabc.com/mapabc/maptile?v=w2.99&x=" + tile.x + "&y=" + tile.y + "&zoom=" + (17-zoom);  
	    }; 
	    var imageMapType = new google.maps.ImageMapType({alt:"MAPabc",isPng:true,maxZoom:18,minZoom:1,name:"MAPabc",tileSize: new google.maps.Size(256, 256),opacity:1.0,getTileUrl:getTileUrl});  
	    map.mapTypes.set('MAPabc',imageMapType);  
	}  
</script>
<style type="text/css">


.address{width: 420px; height: 20px; line-height: 20px; position: absolute; z-index: 10; background: none repeat scroll 0 0 #F7F7F7; }
.address span{display:inline-block; float:left;}
.address .map_time{margin-left:5px; margin-right:15px;}


/*--map 弹出框--*/
.map_tanchu_wrap p{
margin:0; 
padding:5px 10px; 
font-size:12px;
background:#fff;
}
.map_tanchu_wrap {
background: transparent; 
width:130px; 
margin:0 3px;
margin-left:100px;

box-shadow:0px 2px 2px #d9d7d4
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
border-left:1px solid #c2c1be;
border-right:1px solid #c2c1be;
}
.xb1 {
margin:0 5px; 
background:#c2c1be;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #c2c1be; 
border-width:0 1px; 
height:auto;

}

span {
	_overflow: hidden;
}
.arrow {
	position: absolute;
	margin-top:-2px;
	margin-left:50px;
	width: 0;
	height: 0;
	font-size: 0;
	border-width: 12px;
	border-style: solid dashed dashed dashed;
	border-color: #ffffff transparent transparent transparent;
	z-index:20;
}
.arrow_bg{
	position: absolute;
	margin-top:-1px;
	margin-left:50px;
	width: 0;
	height: 0;
	font-size: 0;
	border-width: 12px;
	border-style: solid dashed dashed dashed;
	border-color: #c2c1be transparent transparent transparent;
	z-index:15;
}
</style>
 </head>
  <body onload="initialize()">
    <div id="map_canvas" style="height: 100%; width:100%;  top:0px; position:absolute; height:auto; bottom:0px;"></div>
  </body>
</html>