百度地图路线回放

最新推荐文章于 2024-06-19 17:33:44 发布

屋顶的黑喵

最新推荐文章于 2024-06-19 17:33:44 发布

阅读量724

点赞数

文章标签：百度地图

本文链接：https://blog.csdn.net/weixin_45221142/article/details/102975653

版权

百度地图路线回放

效果图

在这里插入图片描述

直接可以运行

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style>
		body, html,#allmap {width: 100%;height: 95%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
		#r-result{height:100%;width:20%;float:left;}
		#result {width:100%}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填写你的秘钥"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
	<title>xd运输路径</title>
</head>
<body>
	<div id="allmap"></div>
	
	<div id="result"></div>
	<button id="run" >开始</button>
	<button id="stop">停止</button>
	<button id="pause">暂停</button>
	<button id="hide">隐藏信息窗口</button>
	<button id="show">展示信息窗口</button>
</body>
 <script>
	//百度地图API功能
	 var map = new BMap.Map("allmap",{
		 enableClicking:false
	 });
	 map.enableScrollWheelZoom(true);
	 
	 //获取数据
	 //获取驾车获取数据
	 var drv=new BMap.DrivingRoute('西安', {
	     onSearchComplete: function(res) {
	         if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
	             var plan = res.getPlan(0);
	             var arrPois =[];//地图点数据
	             for(var j=0;j<plan.getNumRoutes();j++){
	                 var route = plan.getRoute(j);
	                 arrPois= arrPois.concat(route.getPath());
	                 
	                 //模拟添加经过时间
	                 for(var i=0;i<arrPois.length;i++){
	                 	var date = new Date(1573199501722+i*1000*60).toLocaleString();
	                 	arrPois[i].gpsTime=date;
	                 }
	               //添加轨迹
	               addRoute(arrPois);
	             }
	            ;
	         }
	     }
	 });
	
	//获取数据
	  var start = new BMap.Point(108.953412,34.265612);    //起点
	  var end = new BMap.Point(108.97109,34.225341);    //终点
	 drv.search(start, end);
	
	 var lushu; //路书
	
	 //添加路线
	 function addRoute(data){
	 	var points = [];//点信息数组
	 	var landmarkPois = [];//路书需要数组
	 	var startTime="";
	 	for(var i=0;i<data.length;i++){
	 		var p= new BMap.Point(data[i].lng, data[i].lat);
	 		
	 		if(i==0){ //起点
	 			addMarker(p,data[i].gpsTime,false);
	 			map.centerAndZoom(p, 14);
	 			startTime=data[i].gpsTime;
	 		}else if(i==data.length-1){ //止点
	 			addMarker(p,data[i].gpsTime,false);
	 		}else if(i%Math.round(data.length/10)==0){//其他点
	 			addMarker(p,data[i].gpsTime,false);
	 		}else{
	 			addMarker(p,data[i].gpsTime,true);
	 		}
	 		
	 		points.push(p);
	 		
	 		//路书特殊点（显示经过时间）
	 		landmarkPois.push(new landmark(data[i].lng, data[i].lat,data[i].gpsTime,0.1));
	 	}
	 	
	 	//画线
	 	addLine(points);
	 	
	 	//设置点全部在视野中
		map.setViewport(points);
	 	
	 	
	 	//路书
	 	lushu = new BMapLib.LuShu(map,points,{
	 	    defaultContent:startTime,
	 	    autoView:true,// 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
	 	    icon  : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
	 	    speed: 4500,
	 	    enableRotation:true,// 是否设置marker随着道路的走向进行旋转
	 	    landmarkPois: landmarkPois
	 	});
	 }
	
	 // 添加点
	 function addMarker(point,gpsTime,b){
		//设置marker图标为水滴
		var marker = new BMap.Marker(new BMap.Point(point.lng,point.lat), {
		  // 指定Marker的icon属性为Symbol
		  icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
		    scale: 1,//图标缩放大小
		    fillColor: "orange",//填充颜色
		    fillOpacity: 0.8//填充透明度
		  })
		});
		map.addOverlay(marker);
	  
	  	if(b)
	  	 	marker.hide();
	  	 
	  	var label = new BMap.Label("时间:"+gpsTime+"<br/>位置:"+ marker.getPosition().lng + "," + marker.getPosition().lat,
	  			{offset:new BMap.Size(20,-10)});
	 	marker.setLabel(label);
	 	label.hide();
	 	
	 	marker.addEventListener("mouseover",onMouseover);//鼠标进入事件
	 	marker.addEventListener("mouseout",onMouseout);//鼠标移出事件
	 }
	
	 //画线
	 function addLine(points){
	 	//画线
	 	var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
	 	    scale: 0.6,//图标缩放大小
	 	    strokeColor:'#fff',//设置矢量图标的线填充颜色
	 	    strokeWeight: '1',//设置线宽
	 	});
	 	var icons = new BMap.IconSequence(sy, '100%', '4%');
	 	var polyline =new BMap.Polyline(points, {
	 		   enableEditing: false,//是否启用线编辑，默认为false
	 		   enableClicking: true,//是否响应点击事件，默认为true
	 		   icons:[icons],
	 		   strokeWeight:'5',//折线的宽度，以像素为单位
	 		   strokeOpacity: 0.9,//折线的透明度，取值范围0 - 1
	 		   strokeColor:"#40D6F9" //折线颜色
	 		});
	 	map.addOverlay(polyline);   //增加折线
	 }
	
	 //鼠标进入事件
	 function onMouseover(e){
	 	var p = e.target;
	 	p.getLabel().show();
	 }
	 //鼠标移出事件
	 function onMouseout(e){
	 	var p = e.target;
	 	p.getLabel().hide();
	 }	
	
	 //绑定事件
	 $("run").onclick = function(){
	 	lushu.start();
	 }
	 $("stop").onclick = function(){
	 	lushu.stop();
	 }
	 $("pause").onclick = function(){
	 	lushu.pause();
	 }
	 $("hide").onclick = function(){
	 	lushu.hideInfoWindow();
	 }
	 $("show").onclick = function(){
	 	lushu.showInfoWindow();
	 }
	 function $(element){
	 	return document.getElementById(element);
	 }
	
	
	
	 //路书经过点
	 function landmark(lng,lat,html,pauseTime){
	 	this.lng=lng;
	 	this.lat=lat;
	 	this.html=html;
	 	this.pauseTime=pauseTime;
	 }
 </script>
</html>

屋顶的黑喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图路线回放

百度地图路线回放效果图直接可以运行<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, ...
复制链接

扫一扫