百度地图js实时播放轨迹

该博客介绍如何每隔10秒获取车辆位置并显示在百度地图上,通过规划路线连接点,动态调整地图视野确保车辆位置始终可见。示例代码提供详细实现方式。
摘要由CSDN通过智能技术生成
功能:每个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>

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值