使用OpenLayers在google地图上画轨迹

<link href="<%=request.getContextPath()%>/css/default.css" rel="stylesheet" type="text/css"> 
		<link rel="stylesheet" type="text/css"
			href="<%=request.getContextPath()%>/js/openlayers/theme/default/style.css" />
			<script type="text/javascript" src="<%=request.getContextPath()%>/js/dtree/wtree.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.2.min.js"></script>
		<script src="<%=request.getContextPath()%>/js/common.js"></script>
		<script src="<%=request.getContextPath()%>/js/datagrid.js"></script>
		<script type="text/javascript"
			src="<%=request.getContextPath()%>/js/My97DatePicker/WdatePicker.js"></script>
		<script type="text/javascript"
			src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA0tE6QtF1vsojmaotduPfjBRBKcH7-eLuIkbT9iyHxqbO9bzD9xR5EED_3AiWQGcoowRrgrOqEvUWFA"></script>
		<script type="text/javascript"
			src="<%=request.getContextPath()%>/js/openlayers/lib/OpenLayers.js"></script>

 

<script defer="defer" type="text/javascript">
	
		var map;
		var controls;
		var popup;
		var markers;
		var index=0;
		var pgoogle = new OpenLayers.Projection("EPSG:900913");
        var pdis = new OpenLayers.Projection("EPSG:4326");
        var markerArr=new Array();
        var selmarkers;
        var flag=false;
        var timeover;
        var satellite1;
        $(function(){
        	$("#guiji").click(function(){
        		var selids=deptTree.getCheckedNodes();
        		var str="";
        		for(var n=0; n<selids.length; n++){
        			if (selids[n]>1000){
        				str+=(selids[n]-1000)+";";
        			}
        		} 
        		var c=document.getElementById('mobileId');
        		c.value=str; 
        		var beginTime = document.getElementById("strBeginDate").value;
        		var endTime = document.getElementById("strEndDate").value;
        		if(str == ""){
					alert("请选择定位的目标！");
            	}else if(Date.parse(beginTime.replace(/-/g, "/")) > Date.parse(endTime.replace(/-/g, "/"))){
					alert("开始时间不能大于结束时间！");
                }else{
            		var findForm = document.forms['findfoot'];
    		   		findForm.submit();
                }
        		
        	});
        	
        })
        
		function init(){
			var options = {
	                projection: pgoogle,
	                units: "m",
	                maxResolution: 156543.0339,
	                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,20037508.34, 20037508.34)
	            };
			map = new OpenLayers.Map('map',options);
			var satellite2 = new OpenLayers.Layer.Google( "Google Satellite2" ,{type: G_SATELLITE_MAP, 'maxZoomLevel':18,sphericalMercator:true} );
			var satellite1 = new OpenLayers.Layer.Google( "Google Satellite1" ,{type: G_NORMAL_MAP, 'maxZoomLevel':18,sphericalMercator:true} );
			polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
			map.addLayers([satellite1,satellite2,polygonLayer]);
			map.setCenter(new OpenLayers.LonLat(114.062, 22.54).transform(pdis,pgoogle), 12);
			map.addControl(new OpenLayers.Control.MousePosition());
			map.addControl(new OpenLayers.Control.OverviewMap());
			map.addControl( new OpenLayers.Control.PanZoomBar() );
			
		 	markers = new OpenLayers.Layer.Markers( "Markers" );
            map.addLayer(markers);

            <%
            if(locationMap != null){
            for(Iterator<String> iterator = locationMap.keySet().iterator(); iterator.hasNext();) {
            	String key = (String)iterator.next();
            %>
            var pointArr=new Array();
            var fea2;
    		var oLine;
			<%
				List locationList = (List)locationMap.get(key);
	            Iterator iter2 = locationList.iterator();
				while(iter2.hasNext()){
					Location loc = (Location)iter2.next();
            %>
					var lat = <%=loc.getLongitude()%>;
					var lonb = <%=loc.getLatitude()%>;
					var oPoint = new OpenLayers.Geometry.Point(lonb,lat);
					pointArr.push(oPoint);
					var feature = new OpenLayers.Feature(satellite1, new OpenLayers.LonLat(lonb,lat));
		    		feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
		                'autoSize': true
		           			 });
		    		marker = feature.createMarker();
		    		markerArr.push(marker);
		    		markers.addMarker(marker);
			<%		
				}
			%>

    		if(pointArr.length>1){
	      		
	      		oLine=new OpenLayers.Geometry.LineString(pointArr);
	      	 	fea2 = new OpenLayers.Feature.Vector(oLine);
	      	 	fea2.style={fillColor:"#ee9900"};
	      		polygonLayer.addFeatures([fea2]);
	      	}
            <%
            }
            }
            %>
		} 
		
		 function mousedown(evt) {
               if (popup == null) {
                popup = feature.createPopup(true);
                	 popup.lonlat=this.lonlat;
                popup.setContentHTML("<div style='background-color:red; width:150;height:100'><a href='http://www.somethingconstructive.net' target='_blank'>click me</a></div>");
                popup.setBackgroundColor("yellow");
                popup.setOpacity(0.7);
                markers.map.addPopup(popup);
            } else {
           	    popup.lonlat=this.lonlat;
                popup.toggle();
               }
            OpenLayers.Event.stop(evt);
        } 
           
          
	</script>

 

<div id="map" style="width: 100%; height: 100%; float: left;"></div>

 

<%
			List employeeList = (List)request.getAttribute("employees"); 
			List departmentList=(List)request.getAttribute("departments");  
			HashMap locationMap = (HashMap)request.getAttribute("location"); 
		%>