百度地图js实时播放轨迹 百度地图实时播放轨迹
程序员文章站
2024-02-25 08:46:16
...
功能：每个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>