百度地图js实时播放轨迹

贱贱的梦想

2017-09-19

功能：每个10秒获取车辆的最新位置点，然后地图上画出点和线路，两点之前是用规划路线，而不是直接连线，并且移动点时，根据位置是否在视野范围内，重新设置地图的视野，下面是代码

<!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 type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
<title>单个标注点沿直线的轨迹运动</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map=new BMap.Map("allmap");
var startPoint={lon:116.404,lat:39.915};
map.centerAndZoom(new BMap.Point(startPoint.lon, startPoint.lat), 15);
map.enableScrollWheelZoom(true);

var myIcon=new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片
	//offset: new BMap.Size(0, -5),    //相当于CSS精灵
	imageOffset: new BMap.Size(0, 0)//图片的偏移量。为了是图片底部中心对准坐标点。
});
var carMk=new BMap.Marker(new BMap.Point(startPoint.lon, startPoint.lat),{icon:myIcon});
map.addOverlay(carMk);

function renderLastPoint(point){
	// 实例化一个驾车导航用来生成路线
	var driving=new BMap.DrivingRoute(map);
	var sp=new BMap.Point(startPoint.lon, startPoint.lat);
	var ep=new BMap.Point(point.lon, point.lat);
	driving.search(sp, ep);
	//设置新的开始点
	startPoint=point;
	
	driving.setSearchCompleteCallback(function(res){
		//console.info(res);
		if(driving.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());
            }
			//把实际点加到地图上
            //根据点组的长度画线和画点
			drawMap(arrPois);
		}
	});
}

var t30=10*1000;

function drawMap(pointArr){
	if(pointArr.length==0){
		return;
	}
	var t=t30;//30秒
	//计算每次执行的时间
	var at=t/pointArr.length;
	var i=0;
	
	var f=function(){
		if((i+1)>(pointArr.length-1)){
			return;
		}
		var sp=pointArr[i];
		var ep=pointArr[i+1];
		
		//地图画线
		var polyline=new BMap.Polyline([sp,ep],{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});//创建折线
		map.addOverlay(polyline);
		//移动点
		carMk.setPosition(ep);
		var bound=map.getBounds();//地图可视区域
		if(bound.containsPoint(ep)==false){
			map.panTo(ep);
		}
		
		i++;
		setTimeout(function(){
			f();
		},at);
	};
	
	f();
	
}

//模拟业务
var ii=0;
var _task=setInterval(function(){
	var lastPoint={lon:116.424374+ii*0.01,lat:39.914668};//终点
	if(lastPoint.lon==startPoint.lon&&lastPoint.lat==startPoint.lat){
		//相同点，则不需要画图
		return;
	}
	ii++;
	
	renderLastPoint(lastPoint);
	
},t30);

</script>

js代码 html代码 meta js