带进度条的百度地图车辆轨迹

最新推荐文章于 2024-08-21 23:08:51 发布
yesenfei
最新推荐文章于 2024-08-21 23:08:51 发布
阅读量6.9k
点赞数
本文链接：https://blog.csdn.net/yesenfei/article/details/53117018
版权
最终效果图如下：
核心代码：
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A6b6e4299debc83afd399c175476dc5d"></script>
	<script type="text/javascript" src="${ctxStatic}/jquery/jquery-3.0.0.min.js"></script>
	<title>地图展示</title>
	<style type="text/css">
		 #start{position: absolute; top:98%; left:36%; margin-top:-40px; margin-left:-100px;}
		 #suspend{position: absolute; top:98%; left:40%; margin-top:-40px; margin-left:-100px;}
		 #box{position: absolute; top:98%; left:45%; width: 400px; height: 50px; border: 1px solid #eee; margin-top:-50px; margin-left:-100px;}
		 #bg{height: 10px; margin-top: 19px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
		 #bgcolor{background: #5889B2; width: 0; height: 10px; border-radius: 5px;}
		 #bt{width: 34px; height: 34px; background: url(http://bbs.blueidea.com/data/attachment/album/201505/22/192934pwywwrt8cbrfwzfh.png) no-repeat center center; border-radius: 17px; overflow: hidden; position: absolute; left: 0px; margin-left: -17px; top: 8px; cursor: pointer;}
		 #text{width: 400px; margin: 0 auto; font-size: 16px; line-height: 2em;}
	</style>
<script type="text/javascript">
	var map;
	
	// 复杂的自定义覆盖物
    function ComplexCustomOverlay(point){
      this._point = point;
    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function(map){
      this._map = map;
      var div = this._div = document.getElementById("box");
      var that = this;

      var arrow = this._arrow = document.createElement("div");
      arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
      arrow.style.position = "absolute";
      arrow.style.width = "1px";
      arrow.style.height = "1px";
      arrow.style.top = "22px";
      arrow.style.left = "10px";
      arrow.style.overflow = "hidden";
      div.appendChild(arrow);
     
      div.onmouseover = function(){
      }

      div.onmouseout = function(){
      }

      map.getPanes().labelPane.appendChild(div);
      
      return div;
    }
    ComplexCustomOverlay.prototype.draw = function(){
      var map = this._map;
      var pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
      this._div.style.top  = pixel.y - 30 + "px";
    }

	var pt;
	var vehicleId=1;
	var lastPolyline, lastCarMk;
	var progPercent = 0;
	var clickPro = false;
	var clickSuspend = false;
	var dates = [];
	var pointsLen = 0;
	
	function updatePoint(vehicleId) {
		var points = [];
		$.ajax({  
	          type : "get",  
	          url : "${ctx}/vehicle/rpVehicleGpsLog/getVehinceHisPos",  
	          data : {staffId:vehicleId, t:new Date().getTime()},  
	          async : false,  
	          success : function(result){ 
	        	  dates = [];
	        	  pointsLen = result.length;
	        	  
	        	  for(var i in result) {
	  				points[i] = new BMap.Point(result[i].longitude, result[i].latitude);
	  				dates[i] = result[i].gpsTime;
	  			}
	          }  
	   	});
		
		map.centerAndZoom(points[0], 15);
				
		//var myCompOverlay = new ComplexCustomOverlay(points[Math.round(points.length/2]));
		//var myCompOverlay = new ComplexCustomOverlay(points[0]);
	    //map.addOverlay(myCompOverlay);
		
		var polyline = new BMap.Polyline(points, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
		if(lastPolyline) {
			map.removeOverlay(lastPolyline);
		}
		map.addOverlay(polyline);
		
		var myIcon = new BMap.Icon("http://localhost:8080/safetycone/static/css/images/icon_government.png", new BMap.Size(24, 23), {    //小车图片
			//offset: new BMap.Size(0, -5),    //相当于CSS精灵
			imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
		  });
		
		var carMk = new BMap.Marker(points[0],{icon:myIcon});
		if(lastCarMk) {
			map.removeOverlay(lastCarMk);
		}
		map.addOverlay(carMk);
		
		var i=0;
		function resetMkPoint(i){
			if(clickSuspend) {
				setTimeout(function(){
					resetMkPoint(i);
				},1000);
				return;
			}
			
			if(clickPro) {
				i = Math.floor(progPercent * points.length);
			}
			carMk.setPosition(points[i]);
			if(i < points.length){
				setTimeout(function(){
					i++;
					if(!clickPro) {
						progPercent = i/points.length;	
					}
					resetMkPoint(i);
				},100);
			} else {
				setTimeout(function(){
					resetMkPoint(i);
				},1000);
			}
			clickPro = false;
		}
	
		setTimeout(function() {resetMkPoint(0);}, 100);
		
		lastPolyline = polyline;
		lastCarMk = carMk;
	};
	
	
	$(function(){
		
		var $box = $('#box');
		  var $bg = $('#bg');
		  var $bgcolor = $('#bgcolor');
		  var $btn = $('#bt');
		  var $text = $('#text');
		  var statu = false;
		  var ox = 0;
		  var lx = 0;
		  var left = 0;
		  var bgleft = 0;
		  
		  function refreshPro(){
				//if(progPercent < 1){
					setTimeout(function(){
						var left = 400 * progPercent;
						//console.log(progPercent);
					     if(left > 400) {
					    	 left = 400;
					     }
					     $btn.css('left',left);
					     $bgcolor.width(left);
					     //$text.html('位置:' + parseInt(left/4) + '%');
					     $text.html(dates[Math.floor(pointsLen*progPercent)]);
					     
						refreshPro();
					},1000);
				//}
			}
		
		  setTimeout(function(){refreshPro();}, 1000);
		  
		   $btn.mousedown(function(e){
			lx = $btn.offset().left;
			ox = e.pageX - left;
			statu = true;
		   });
		   $(document).mouseup(function(){
		    statu = false;
		   });
		   $box.mousemove(function(e){
		    if(statu){
		     left = e.pageX - ox;
		     if(left < 0){
		      left = 0;
		     }
		     if(left > 400){
		      left = 400;
		     }
		     $btn.css('left',left);
		     $bgcolor.width(left);
		     //$text.html('位置:' + parseInt(left/4) + '%');
		     $text.html(dates[Math.floor(pointsLen*progPercent)]);
		    }
		   });
		   $bg.click(function(e){
			   clickPro = true;
			   clickSuspend = false;
		    if(!statu){
		     bgleft = $bg.offset().left;
		     left = e.pageX - bgleft;
		     if(left < 0){
		      left = 0;
		     }
		     if(left > 400){
		      left = 400;
		     }
		     $btn.css('left',left);
		     $bgcolor.stop().animate({width:left},400);
		     //$text.html('位置:' + parseInt(left/4) + '%');
		     $text.html(dates[Math.floor(pointsLen*progPercent)]);
		     
		     progPercent = left/400;
		    }
		    
			});
	

		   $("#start").bind("click",function(){
			   clickSuspend = false;
		   });
		   

		   $("#suspend").bind("click",function(){
			   clickSuspend = true;
		   });
		   
		   
		//setInterval(function() {updatePoint(vehicleId)}, 5000);
		
		$("#btn_1").bind("click",function(){
			cla=$(this).attr('class');
			if(cla=='btn_sq'){
				$("#panel_1").slideUp("fast");
				$("#tool_1").slideUp("fast");
				$(this).attr('class','btn_zk');
			}else{
				$("#pan
						el_1").slideDown("fast");
				$("#tool_1").slideDown("fast");
				$(this).attr('class','btn_sq');
			}
		});
		
		$('#btnSubmit').click(function() {
			var beginDate = $('#beginDate').val();
			if(beginDate == '') {
				alert('开始日期不能为空');
				return;
			}
			beginDate = new Date(beginDate.replace(/-/g, '/'));
			var endDate = $('#endDate').val();
			if(endDate == '') {
				alert('结束日期不能为空');
				return;
			}
			endDate = new Date(endDate.replace(/-/g, '/'));
			var dateDiff = (endDate.getTime() - beginDate.getTime()) / 1000/60/60/24;
			if(dateDiff > 1) {
				alert('日期间隔不能超过一天');
				return;
			}
			$('#searchForm').submit();
		});
	});

</script>
</head>
<body>
<div  class="map" id="h" >
  <div class="po_left">
    <div class="pl_top2"><span>车辆选择</span>
      <input id="btn_1" class="btn_sq" type="button" />
    </div>
    <div id="panel_1">
      <div class="pl_c">
      <form:form id="searchForm" modelAttribute="article" action="${ctx}/vehicle/rpVehicleGpsLog/gisHistory" method="post" class="breadcrumb form-search">
		<div>
			<label>开始日期：</label><input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20" class="input-small Wdate" pattern="yyyy-MM-dd HH:mm:ss"
				 οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/></br>
			<label>结束日期：</label><input id="endDate" name="endDate" type="text" readonly="readonly" maxlength="20" class="input-small Wdate" pattern="yyyy-MM-dd HH:mm:ss"
				 οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>    
			<input id="btnSubmit" class="btn btn-primary" type="button" value="查询"/>
		</div>
	</form:form>
       <table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<th>名称</th>
				<th>车牌号</th>
				<th>类型</th>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${page.list}" var="rpVehicle">
			<tr>
				<td><a href="javascript:updatePoint(${rpVehicle.id})">
					${rpVehicle.name}
				</a></td>
				<td>${rpVehicle.licenseNum}</td>
				<td>${fns:getDictLabel(rpVehicle.type, 'vehicle_type', '车辆')}</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="pagination">${page}</div>
      </div>
    </div>
  </div>
  <div id="allmap" class="allmap"></div>
</div>

<div id="start"><input class="btn btn-primary" type="button" value="开始"/></div>
<div id="suspend"><input class="btn btn-primary" type="button" value="暂停"/></div>
 <div id="box">
  <div id="bg">
   <div id="bgcolor"></div>
  </div>
  <div id="bt"></div>
  <div id="text"></div>
 </div>
 
 
</body>
</html>
<script type="text/javascript">
	map = new BMap.Map("allmap");
	var pt = new BMap.Point(115.893868,28.550235);
	map.centerAndZoom(pt, 11);
	
	map.enableScrollWheelZoom();
	map.setMinZoom(5);
	map.setMaxZoom(19);
	map.disableDoubleClickZoom();
	
</script>