<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="cn.exlive.mygpsonline.util.MyApplicationContextUtil"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String sstype= request.getParameter("type");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
    <title></title>
    <link rel="Shortcut icon" href="<%=path%>/gpsonline/image/pic/logo.ico" type="image/x-icon"/> 
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height:100% ;overflow:hidden;}
      #container{height:100%}
</style>
    <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
    <!-- 
    <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://api.map.baidu.com/api?v=1.5&amp;ak=<%=MyApplicationContextUtil.map_baidu_key%>"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
    <script  charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=PDOBZ-YSJRS-U4WOK-6SFWT-LMMM2-TSFJP&libraries=convertor"></script>
    
    <script type="text/javascript" src="<%=path%>/gpsonline/js/baiduMap/baiduMapTrack.js"></script>
	<script type="text/javascript" src="<%=path%>/gpsonline/js/tool/tenmap.js"></script>
    <script type="text/javascript" src="<%=basePath%>gpsonline/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="<%=path%>/gpsonline/js/MianMap/MianMap.js"></script>
    <script type="text/javascript" src="<%=path%>/gpsonline/js/google/google.js"></script>
    <script type="text/javascript" src="<%=path%>/gpsonline/js/gaode/gaode.js"></script>
<script type="text/javascript">
	function getScript(src){
			$("head").append("<script src='"+src+"'><\/script>");
	}	
   var trackkg;
   var jiejingkg=false;
   var map;
   var markersArray = [];
   var id;
   var carList;
   var x;
   var y;
   var series;
   var vehicle;
   var timestamp;
   var mapType;
   var carid;
   function chushihua(){
    	var sstype='<%=sstype%>';
	    if(sstype!="null"){
	     	$('#select').hide();
	    }
   		carid = document.getElementById("carid").value;
	   	mapType = document.getElementById("mapType").value;
	   	var  myselect=document.getElementById("select");
	   
	   	if(mapType==1){
			 myselect.options[0].selected = true;
	   	}else if(mapType==3){
	   		 myselect.options[2].selected = true;
	   	}else{
	   		 myselect.options[1].selected = true;
	   	}
	   	initialize();
   }
   
   var isbol = false;
   function initialize(){
   		$.ajax({
	        type: "POST",
	        dataType: "json",
	        async:false,
	        url: "json/vehicleAction_byids.action",
	        data:{ids:carid,t:1,timestamp:0},
	        success: function(data){
		        //console.info(JSON.stringify(data));
		      	if(data.flag==true){
			      	//alert(data.timestamp);
			      	document.title=data.data[0].vhcCode + " | 跟踪";
			      	document.getElementById('position').innerHTML = "位置: " +data.data[0].positionLast.memo;
			      	if(isbol == false){
			      		isbol = true;
			      		countDown();
			      	}
			      	curve();
			      	timestamp= data.timestamp;
			      	carList=data;
			      	id=carid;
		      		if(mapType==1){
		      			document.getElementById("map_canvas").style.display="none";
						document.getElementById("container").style.display="block";
		      			baiduMap(carid);
		      		}else if(mapType==3){
		      			loadGaodeMapJs();//加载高德地图js
		      			setTimeout('loadGaoDeTrack()',500);
			      	}else{
		      			if(typeof(google)=="undefined"){
		      				 loadGoogleMapJs();
		      			 }
		      			loadGoogleMetnod(data);
					}
				 }
	        },
	        error:function(){}
	   });
    }


 //追踪页面加载google方法
   var data;
   function loadGoogleMetnod(datas){
   	if(typeof(data)=="undefined"){
   		data = datas;
   	}
   	if(typeof(google)=="undefined"){
   		setTimeout('loadGoogleMetnod()',1000);
   		return;
   	}
   	document.getElementById("container").style.display = "none";
   	document.getElementById("map_canvas").style.display = "block";
   		var mapOptions = {
             center: new google.maps.LatLng(data.data[0].positionLast.lat, data.data[0].positionLast.lng),
             zoom: 14,
             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);
       getScript("<%=basePath%>gpsonline/js/infobox.js");  
       addMAPabc(map);
   	var myLatlng = new google.maps.LatLng(data.data[0].positionLast.lat,data.data[0].positionLast.lng);
   	latlngArr.push(myLatlng);
   	
   	var trafficLayer= new google.maps.TrafficLayer();
   	trafficLayer.setMap(map);
   		var s=10;
   		var condition=data.data[0].positionLast.state2;
   	  	var sp = parseInt(data.data[0].positionLast.speed);
   	  	if (condition != null) {
   		if (condition.indexOf("不在线")>=0 || condition.indexOf("掉线")>=0)
   			s = 2;
   		else {
   			if (condition.indexOf("速报警")>=0)
   				s = 4;
   			else if (condition.indexOf("报警")>=0)
   				s = 3;
   			else if (sp > 0.5)
   				s = 0;
   			else
   				s = 1;

   		}
   		if (s != 4 && s != 3 && condition.indexOf("停车")>=0
   				&& !condition.indexOf("不在线")>= 0){
   										if(condition.indexOf("停车超时")>=0){
   											s = 5;	
   										}else{
   											s = 6;
   										}
   								}
   	}else{
   		if (sp > 0.5)
   			s = 0;
   		else
   			s = 1;
   	}
   	var newtime = new Date().getTime();
   				var ttime =data.data[0].positionLast.recvtime.replace("-","/");
   				ttime=ttime.replace("-","/");
   				ttime=ttime.replace("T"," ");
   				var oldtime = new Date(ttime).getTime();

   				if(newtime-oldtime > 600000){
   					s=2;
   				}
   	
     	var state =s;
     	var pngicon = "<%=basePath%>gpsonline/image/pic/"+data.data[0].icon+"/red_0.gif";
   	if(state == 0) pngicon = "<%=basePath%>gpsonline/image/pic/"+data.data[0].icon+"/green_";
   	else if(state == 1) pngicon = "<%=basePath%>gpsonline/image/pic/"+data.data[0].icon+"/red_";
   	else if(state == 2) pngicon = "<%=basePath%>gpsonline/image/pic/"+data.data[0].icon+"/gray_";
   	else if(state == 3) pngicon = "<%=basePath%>gpsonline/image/pic/"+data.data[0].icon+"/yellow_";
   	else if(state == 4) pngicon = "<%=basePath%>gpsonline/image/pic/"+data.data[0].icon+"/pink_";
   	else if(state == 5) pngicon = "<%=basePath%>gpsonline/image/pic/"+data.data[0].icon+"/stopalarm";
   	else pngicon = "<%=basePath%>gpsonline/image/pic/"+data.data[0].icon+"/red_";
   	var direction="";
   	var t = parseInt(data.data[0].positionLast.direct);
   			  if(t>27 && t<=72){
   			  		if(state == 5){
   			  			var image=".gif";
   			  		}else{
   			  			var image="45.gif";
   			  		}
   					
   					direction="东北";
   				}else if(t>72 && t<=117){
   					if(state == 5){
   			  			var image=".gif";
   			  		}else{
   			  			var image="90.gif";
   			  		}
   					
   					direction="东";
   				}
   				else if(t>117 && t<=162){
   					if(state == 5){
   			  			var image=".gif";
   			  		}else{
   			  			var image="135.gif";
   			  		}
   					direction="东南";
   				}
   				else if(t>162 && t<=207){
   					if(state == 5){
   			  			var image=".gif";
   			  		}else{
   			  			var image="180.gif";
   			  		}
   					direction="南";
   				}
   				else if(t>207 && t<=252){
   					if(state == 5){
   			  			var image=".gif";
   			  		}else{
   			  			var image="225.gif";
   			  		}
   					direction="西南";
   				}
   				else if(t>252 && t<=297){
   					if(state == 5){
   			  			var image=".gif";
   			  		}else{
   			  			var image="270.gif";
   			  		}
   					direction="西";
   				}
   				else if(t>297 && t<=342){
   					if(state == 5){
   			  			var image=".gif";
   			  		}else{
   			  			var image="315.gif";
   			  		}
   					direction="西北";
   				}
   				else {
   					if(state == 5){
   			  			var image=".gif";
   			  		}else{
   			  			var image="0.gif";
   			  		}
   					direction="北";
   				}
   				var icon_size=real(data.data[0].icon);
   			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)),
   			      title:data.data[0].vhcCode
   			});
   			markersArray.push(marker);
   			//var contentString = "<b>设备名称：</b>"+data.data[0].vhcCode+"</br>"
   			//						+"<b>接收时间：</b>"+data.data[0].positionLast.recvtime+"</br>"
   			//						+"<b>速度：</b>"+data.data[0].positionLast.speed+"km/h </br>"
   			//						+"<b>方向：</b>"+direction+"</br>"
   			////						+"<b>状态：</b>"+data.data[0].positionLast.state2+"</br>"
   			//						+"<b>位置：</b>"+data.data[0].positionLast.memo+"</br>";
   									
   			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>"+data.data[0].vhcCode+"</br>"
   									+"<b>接收时间：</b>"+data.data[0].positionLast.recvtime+"</br>"
   									+"<b>速度：</b>"+data.data[0].positionLast.speed+"km/h </br>"
   									//+"<b>经纬度：</b>"+data.data[0].positionLast.speed+"km/h </br>"
   									+"<b>方向：</b>"+direction+"</br>"
   									+"<b>状态：</b>"+data.data[0].positionLast.state2+"</br>"
   									+"<b>位置：</b>"+data.data[0].positionLast.memo+"</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 myOptions = {
   				 content: boxText
   				,disableAutoPan: false
   				,maxWidth: 0
   				,pixelOffset: new google.maps.Size(-163, -170)
   				,zIndex:null
   				,boxStyle:{
   				  // background: "url('tipbox.gif') no-repeat"
   				  // background: " no-repeat"
   				  //,opacity: 0.75
   				  //,width: "280px"
   				  background: "no-repeat"
   				  ,width: "430px"
   				 }
   				,closeBoxMargin: "10px 35px 0px -20px"
   				,closeBoxURL: "<%=path%>/gpsonline/image/monitor/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,"click",function(e){
   				
   				infowindow.open(map, this);
   				infowindow.show();
   			});
   			infowindow.open(map, marker);
   			if(x==0){
   				//infowindow.open(map, marker);
   			}
   			vehicle = new Object();
   		    vehicle.id = data.data[0].vehicleId;
   			vehicle.marker = marker;
   			vehicle.infowindow = infowindow;
   			vehicle.latlng = myLatlng;
   }
    function al(){
	    	$.ajax({
	        type: "POST",
	        dataType: "json",
	        async:false,
	        url: "json/vehicleAction_onlinevids.action",
	        data: {ids:id,t:1,timestamp:timestamp},
	        success: function(data){
		      	if(data.flag==true){
		      		if(data.data.length>0){
			      		var s2 =data.data[0].recvtime.replace("-","/");
						s2=s2.replace("-","/");
						s2=s2.replace("T"," ");
						var newtime =(new Date(s2)).getTime();
		      			
		      			var chart = $('#container_qu').highcharts();
		      			
			            chart.series[0].addPoint([newtime+28809000,parseInt(data.data[0].speed)], true, false);
			            chart.series[1].addPoint([newtime+28809000,parseInt(data.data[0].temperature)], true, false);
			            chart.series[2].addPoint([newtime+28809000,parseInt(data.data[0].oilMN1)], true, false);
		    
		      			trackkg = true;
		      			timestamp = data.timestamp;
		      			//deleteOverlays();
		      		    carList.data[0].positionLast = data.data[0];
		      		       if(mapType==1){
		      		       		updateBaiduMap();
		      		       }else if(mapType==3){
		      		    	  	updateGaodeMapTrack();
			      		   }else{
					    		var myLatlng = new google.maps.LatLng(carList.data[0].positionLast.lat,carList.data[0].positionLast.lng);
								var s=10;
								var condition=carList.data[0].positionLast.state2;
							  	var sp = parseInt(carList.data[0].positionLast.speed);
							  	if (condition != null) {
								if (condition.indexOf("不在线")>=0 || condition.indexOf("掉线")>=0)
									s = 2;
								else {
									if (condition.indexOf("速报警")>=0)
										s = 4;
									else if (condition.indexOf("报警")>=0)
										s = 3;
									else if (sp > 0.5)
										s = 0;
									else
										s = 1;
					
								}
								if (s != 4 && s != 3 && condition.indexOf("停车")>=0
										&& !condition.indexOf("不在线")>= 0){
																if(condition.indexOf("停车超时")>=0){
																	s = 5;	
																}else{
																	s = 6;
																}
														}
							}else{
								if (sp > 0.5)
									s = 0;
								else
									s = 1;
							}
							var newtime = new Date().getTime();
										var ttime =carList.data[0].positionLast.recvtime.replace("-","/");
										ttime=ttime.replace("-","/");
										ttime=ttime.replace("T"," ");
										var oldtime = new Date(ttime).getTime();
		
										if(newtime-oldtime > 600000){
		
											s=2;
										}
						  	var state =s;
						  	var pngicon = "<%=basePath%>gpsonline/image/pic/"+carList.data[0].icon+"/red_0.gif";
							if(state == 0) pngicon = "<%=basePath%>gpsonline/image/pic/"+carList.data[0].icon+"/green_";
							else if(state == 1) pngicon = "<%=basePath%>gpsonline/image/pic/"+carList.data[0].icon+"/red_";
							else if(state == 2) pngicon = "<%=basePath%>gpsonline/image/pic/"+carList.data[0].icon+"/gray_";
							else if(state == 3) pngicon = "<%=basePath%>gpsonline/image/pic/"+carList.data[0].icon+"/yellow_";
							else if(state == 4) pngicon = "<%=basePath%>gpsonline/image/pic/"+carList.data[0].icon+"/pink_";
							else if(state == 5) pngicon = "<%=basePath%>gpsonline/image/pic/"+carList.data[0].icon+"/stopalarm";
							else pngicon = "<%=basePath%>gpsonline/image/pic/"+carList.data[0].icon+"/red_";
									 
									 var direction="";
									 var t = parseInt(carList.data[0].positionLast.direct);
									   if(t>27 && t<=72){
									  		if(state == 5){
									  			var image=".gif";
									  		}else{
									  			var image="45.gif";
									  		}
											
											direction="东北";
										}else if(t>72 && t<=117){
											if(state == 5){
									  			var image=".gif";
									  		}else{
									  			var image="90.gif";
									  		}
											
											direction="东";
										}
										else if(t>117 && t<=162){
											if(state == 5){
									  			var image=".gif";
									  		}else{
									  			var image="135.gif";
									  		}
											direction="东南";
										}
										else if(t>162 && t<=207){
											if(state == 5){
									  			var image=".gif";
									  		}else{
									  			var image="180.gif";
									  		}
											direction="南";
										}
										else if(t>207 && t<=252){
											if(state == 5){
									  			var image=".gif";
									  		}else{
									  			var image="225.gif";
									  		}
											direction="西南";
										}
										else if(t>252 && t<=297){
											if(state == 5){
									  			var image=".gif";
									  		}else{
									  			var image="270.gif";
									  		}
											direction="西";
										}
										else if(t>297 && t<=342){
											if(state == 5){
									  			var image=".gif";
									  		}else{
									  			var image="315.gif";
									  		}
											direction="西北";
										}
										else {
											if(state == 5){
									  			var image=".gif";
									  		}else{
									  			var image="0.gif";
									  		}
											direction="北";
										}
									
									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>"+carList.data[0].vhcCode+"</br>"
													+"<b>接收时间：</b>"+carList.data[0].positionLast.recvtime+"</br>"
													+"<b>速度：</b>"+carList.data[0].positionLast.speed+"km/h </br>"
													+"<b>方向：</b>"+direction+"</br>"
													+"<b>状态：</b>"+carList.data[0].positionLast.state2+"</br>"
													+"<b>位置：</b>"+carList.data[0].positionLast.memo+"</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>";					
											document.getElementById('position').innerHTML = "位置: " +carList.data[0].positionLast.memo;
											vehicle.marker.setPosition(myLatlng);
											map.panTo(vehicle.marker.getPosition());	
											
											var icon_size=real(carList.data[0].icon);	 
					    					vehicle.marker.setIcon(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)));
					    					vehicle.infowindow.setContent(boxText);
					    					latlngArr.push(myLatlng);
					    					var rgb="#00CD00";
											if(carList.data[0].positionLast.speed.toFixed(1)>100){
												rgb="#FF34B3";
											}
					    					var flightPath = new google.maps.Polyline({
											      path: latlngArr,
											      strokeColor: rgb,
											      strokeOpacity: 1.0,
											      strokeWeight: 3
										    });
										    flightPath.setMap(map);
										    latlngArr.length = 0;
										    latlngArr.push(myLatlng);
										    if(jiejingkg==true){
												streeViewObject.open(carList.data[0].positionLast.lat,carList.data[0].positionLast.lng,carList.data[0].positionLast.direct,5);
											}
		      			}
		      		}
				 }
			     x = carList.data[0].positionLast.recvtime;
			     y = carList.data[0].positionLast.speed;
	        },
	        error: function(){
	           
			}
	   });
    }
    function deleteOverlays(){
	    if (markersArray){
	      for (i in markersArray) {
	        markersArray[i].setMap(null);
	      }
	      markersArray.length = 0;
        }
    }
    function showOverlays() {
	    if (markersArray) {
		      for (i in markersArray) {
		        markersArray[i].setMap(map);
		      }
	    }
    }
    function addMarker(location,carname,icon){
	    marker = new google.maps.Marker({
	      position: location,
	      map: map,
	      icon:icon,
	      title:carname
	    });
	    markersArray.push(marker);
		return marker;
	 }
	function setPosition() {
	    if (markersArray) {
	      for (i in markersArray) {
	        markersArray[i].Position(null);
	      }
	    }
 	 }
	var num = 10;
    function countDown() {
        if (num >= 0) {
            var str = '';
            str = "<font color='red'>"+num+" </font>" + "秒后刷新 ";
            document.getElementById('autoDir').innerHTML = str;
            num--;
            setTimeout(countDown, 1000);
        }
        else{
           num = 10;
           al();
           countDown();
          
        }
    }
    
    
    //地图添加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">
body{margin:0px; padding:0px; font-size:12px;}
.address{width: 420px; height: 20px; line-height: 20px; position: absolute; top: 0; 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;}
.open_sudu{white-space: nowrap; z-index: 12; cursor: pointer; position: absolute; top: 35px; right: 7px; width: 76px; background-color: #fff; color: #000; padding: 2px 6px;
margin: 0; border: 1px solid #8BA4DC; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border-radius: 3px; text-align: center; display:block; text-decoration: none;}
.sudu_main{background:#fff; height:200px; tex-align:center;}
.close_sudu{background-color: #8EA8E0; color: #fff; white-space: nowrap; z-index: 11; cursor: pointer; position: absolute; top: 35px; right: 7px; width: 76px; padding: 2px 6px;
margin: 0; border: 1px solid #8BA4DC; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border-radius: 3px; text-align: center; display:block; text-decoration: none;}
.sudu_main h3{color: #3E576F; font-size:12px; text-align:center; font-weight:normal; margin:10px 0px;}

.open_jiejing{white-space: nowrap; z-index: 12; cursor: pointer; position: absolute; top: 35px; right: 100px; width: 76px; background-color: #fff; color: #000; padding: 2px 6px;
margin: 0; border: 1px solid #8BA4DC; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border-radius: 3px; text-align: center; display:block; text-decoration: none;}
.sudu_main{background:#fff; height:200px; tex-align:center;}
.close_jiejing{background-color: #8EA8E0; color: #fff; white-space: nowrap; z-index: 11; cursor: pointer; position: absolute; top: 35px; right: 100px; width: 76px; padding: 2px 6px;
margin: 0; border: 1px solid #8BA4DC; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border-radius: 3px; text-align: center; display:block; text-decoration: none;}
.sudu_main h3{color: #3E576F; font-size:12px; text-align:center; font-weight:normal; margin:10px 0px;}
</style>
<script type="text/javascript">

	function open_sudu(){
		
		if(mapType==1){
			var map_canvas = document.getElementById("container");
			var sudu_main = document.getElementById("sudu_main");
			var open_button = document.getElementById("open_button");
			var close_button = document.getElementById("close_button");
			var pano_container = document.getElementById("pano_container");
			var clientheight= document.body.clientHeight;
			//alert(clientheight);
			map_canvas.style.height = clientheight - 210+"px";
			pano_container.style.height = clientheight - 210+"px";
			sudu_main.style.display = "block";
			open_button.style.display ="none";
			close_button.style.dislpay="block";
		}else{
			var map_canvas = document.getElementById("map_canvas");
			var sudu_main = document.getElementById("sudu_main");
			var open_button = document.getElementById("open_button");
			var close_button = document.getElementById("close_button");
			var pano_container = document.getElementById("pano_container");
			var clientheight= document.body.clientHeight;
			//alert(clientheight);
			map_canvas.style.height = clientheight - 210+"px";
			pano_container.style.height = clientheight - 210+"px";
			sudu_main.style.display = "block";
			open_button.style.display ="none";
	
			close_button.style.dislpay="block";
		}
		

	}
	
	function close_sudu(){
		if(mapType==1){
			var map_canvas = document.getElementById("container");
			var sudu_main = document.getElementById("sudu_main");
			var open_button = document.getElementById("open_button");
			var close_button = document.getElementById("close_button");
			var clientheight= document.body.clientHeight;
			
			map_canvas.style.height = clientheight+"px";
			
			var pano_container = document.getElementById("pano_container");
			pano_container.style.height = clientheight+"px";

			sudu_main.style.display = "none";
			open_button.style.display ="block";
			close_button.style.dislpay="none";
		}else{
		
			var map_canvas = document.getElementById("map_canvas");
			var sudu_main = document.getElementById("sudu_main");
			var open_button = document.getElementById("open_button");
			var close_button = document.getElementById("close_button");
			var clientheight= document.body.clientHeight+"px";
			
			map_canvas.style.height = clientheight;
			var pano_container = document.getElementById("pano_container");
			pano_container.style.height = clientheight;
			
			sudu_main.style.display = "none";
			open_button.style.display ="block";
	
			close_button.style.dislpay="none";
			
		}
		

	}
	
	function open_jiejing(){
		jiejingkg=true;
		streeViewObject.pano = null;
		if(mapType==1 || mapType==3){
				var map_canvas = document.getElementById("container");
				var open_button2 = document.getElementById("open_button2");
				var close_button2 = document.getElementById("close_button2");
				
				var open_button = document.getElementById("open_button");
				var close_button = document.getElementById("close_button");
				
				
				var clientwidth= document.body.clientWidth;
				map_canvas.style.width = clientwidth/2+"px";
				var map_qiehuan = document.getElementById("map_qiehuan");
				map_qiehuan.style.right = clientwidth/2 + 120 + "px";
				
				open_button.style.right = clientwidth/2 + 30 + "px";
				close_button.style.right = clientwidth/2 + 30 + "px";
				open_button2.style.right = clientwidth/2 + 130 + "px";
				close_button2.style.right = clientwidth/2 + 130 + "px";
				
				
				open_button2.style.display ="none";
				close_button2.style.dislpay="block";
				baidMap.addEventListener('resize', function(){
				    baidMap.setCenter(new BMap.Point(carList.data[0].positionLast.blng,carList.data[0].positionLast.blat));
				});
				streeViewObject.open(carList.data[0].positionLast.blat,carList.data[0].positionLast.blng,carList.data[0].positionLast.direct,3);
		
		}else{
				
				var map_canvas = document.getElementById("map_canvas");
				var open_button2 = document.getElementById("open_button2");
				var close_button2 = document.getElementById("close_button2");
				
				var open_button = document.getElementById("open_button");
				var close_button = document.getElementById("close_button");
			
				var clientwidth= document.body.clientWidth;
				map_canvas.style.width = clientwidth/2+"px";
				
				var map_qiehuan = document.getElementById("map_qiehuan");
				map_qiehuan.style.right = clientwidth/2 + 170 + "px";
				open_button.style.right = clientwidth/2 + 30 + "px";
				close_button.style.right = clientwidth/2 + 30 + "px";
				open_button2.style.right = clientwidth/2 + 130 + "px";
				close_button2.style.right = clientwidth/2 + 130 + "px";
				
				open_button2.style.display ="none";
				close_button2.style.dislpay="block";
				google.maps.event.trigger(map, 'resize');
				map.panTo(new google.maps.LatLng(carList.data[0].positionLast.lat,carList.data[0].positionLast.lng));
				streeViewObject.open(carList.data[0].positionLast.lat,carList.data[0].positionLast.lng,carList.data[0].positionLast.direct,5);
				//map.setCenter(map.getCenter());
			
				
		}
	}
	function close_jiejing(){
		jiejingkg=false;
		if(mapType==1 || mapType==3){
			var map_canvas = document.getElementById("container");
				var open_button2 = document.getElementById("open_button2");
				var close_button2 = document.getElementById("close_button2");
				
				var open_button = document.getElementById("open_button");
				var close_button = document.getElementById("close_button");
			
				var clientwidth= document.body.clientWidth;
				map_canvas.style.width = clientwidth+"px";
				
				var map_qiehuan = document.getElementById("map_qiehuan");
				map_qiehuan.style.right =  170 + "px";
				open_button.style.right =  30 + "px";
				close_button.style.right =  30 + "px";
				open_button2.style.right =  130 + "px";
				close_button2.style.right =  130 + "px";
			
			open_button2.style.display ="block";
			close_button2.style.dislpay="none";
			baidMap.addEventListener('resize', function(){
				    baidMap.setCenter(new BMap.Point(carList.data[0].positionLast.blng,carList.data[0].positionLast.blat));
			});
			$("#pano_container").hide();
		}else{
			var map_canvas = document.getElementById("map_canvas");
			
			var open_button2 = document.getElementById("open_button2");
				var close_button2 = document.getElementById("close_button2");
				
				var open_button = document.getElementById("open_button");
				var close_button = document.getElementById("close_button");
				
				var clientwidth= document.body.clientWidth;
				map_canvas.style.width = clientwidth+"px";
				
				var map_qiehuan = document.getElementById("map_qiehuan");
				map_qiehuan.style.right =  170 + "px";
				open_button.style.right =  30 + "px";
				close_button.style.right =  30 + "px";
				open_button2.style.right =  130 + "px";
				close_button2.style.right =  130 + "px";
			
			open_button2.style.display ="block";
			close_button2.style.dislpay="none";
			google.maps.event.trigger(map, 'resize');
			map.panTo(vehicle.marker.getPosition());
			$("#pano_container").hide();
		}
		

	}
</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:300px; 
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="chushihua()">
  
  	<div style="position: absolute; top: 8px; z-index: 800; right: 170px;" id="map_qiehuan">
  		<select id="select" onchange="cutoverMap();" style=" color: #C33;">
	 		 <option value="1" selected>百度地图</option>
	         <option value="2" >谷歌地图</option>
	         <option value="3" >高德地图</option>
	 	</select>	
  	</div>
  	
  	<input type="hidden" value="<%=request.getParameter("carid")%>" id="carid" name="carid"/>
  	<input type="hidden" value="<%=request.getParameter("mapType")%>" id="mapType" name="mapType"/>
  	<!-- message -->
  	<div class="address" style="width:auto;">
  		<span id="autoDir" class="map_time"></span>
  		<span id="position"></span>
  	</div>
  	<!-- message end-->

  	<!-- map -->
  	<div id="container" style="display:none;width: 100%"></div>
    <div id="map_canvas" style="width: 100%">
    
    </div>
    <div id="pano_container" style="position:absolute;width:50%;height:100%;display:none;right:0px;top:0px;background-color:#f7f8f9;">
    	<span id="pano_image" style="
		    position: absolute;
		    display:none;
		    position:absolute;
			top:50%;
			left:50%;
			margin:-120px 0 0 -235px;
			width:549px;
			height:237px;
			
			background-image:url('/mygpsonline/gpsonline/image/tool/no_jiejing.jpg');
			">
				 　　　<font color="#7d7d7d"　size="16">　<br><br><br>　　　　　　　　　　　　　抱歉，此处无街景</font>
		</span>	
		
    
    </div>
    <!-- map end -->
    
    <!-- 速度曲线  -->
    <a href="javascript:open_jiejing()" class="open_jiejing" id="open_button2">显示街景</a>
    <a href="javascript:close_jiejing()" class="close_jiejing" id="close_button2">隐藏街景</a>
    
    <a href="javascript:open_sudu()" class="open_sudu" id="open_button">查看速度曲线</a>
    <a href="javascript:close_sudu()" class="close_sudu" id="close_button">隐藏速度曲线</a>
    
    <div id="sudu_main" class="sudu_main" style="display:none">
    	<jsp:include page="/gpsonline/jsp/TrackCurve.jsp" flush="true"/>
    </div>
  
  </body>
</html>