百度地图API实现轨迹动态回放并控制回放速度

这几天在做和百度地图API有关的工作，为了使轨迹可视化更美观一点，想做成可以回放的效果。基本的效果是：屏幕旁边有个时间戳，时间在增加，轨迹就不断的更新出来。并且可以控制速度。
主要借鉴了这篇博客：http://blog.csdn.net/liusaint1992/article/details/50082781
并在此基础上控制了播放速度，并把初始时间改为第一个轨迹点的时间。
数据是汽车轨迹数据，在数据库中储存，格式为：id,time,lon(经度),lat(纬度)。
先介绍下几个主要用到的函数：
1.function loadTrackByTime() //button点击后的调用函数
2.function setZoon() //设置视图的函数，就是随着点的增加，百度API的Zoom会根据点来改变
3.function addMaerker() //为每个点设置标签啦
4.function addLine() //画线函数
5.function trackTime() //计时函数（在回放轨迹时旁边会有个时间一直在变，当到达了那个时间，就画一个点）
6.funtion getDate() //获取日期的辅助函数
7.function dateDiff() //算时间差的函数

/**
 * Created by qhsun on 17-3-27.
 */
//轨迹回放功能
//一些变量
var donePoints=[];   //已经画过的点
var bPoints=[];      //API自动更改Zoom
var timerArr=[];     //时间
var interval;    
var velocity;    //速度变量
function loadTrackByTime()
{
    if(document.getElementById("velocity").value=="")
    {
        velocity=1;
    }
    else
        {
        velocity = parseInt(document.getElementById("velocity").value);
    } //这个if_else主要是默认为1而设置
    map.clearOverlays(); //清除之前百度地图上的覆盖物
    for(var t=0;t//清除时间
    timerArr=[];
    clearInterval(interval);  
    bPoints.length=0;
    donePoints.length=0;

    var driver_id = document.getElementById("driver_id").value;
    var dateBegin = document.getElementById("start_time").value;
    var dateEnd = document.getElementById("end_time").value;  //上面都是获取值啦

    $.post("hello", {'driver_id': driver_id, 'start_time': dateBegin, 'end_time': dateEnd}, function (data) { //post方法给后台传数据，data就是获取到的数据（json格式的，data.taxi就是所获取的所有坐标，比如data.taxi[i].time就是第i+1个点的时间，格式是：2008-02-02 01：00：00，data.taxi[1].lon就是第一个点的经度）
        var points=data.taxi;
        var pointsLen=data.taxi.length;
        var searchRes=[];  //符合条件的坐标
        for(var i=0;iif(dateDiff(points[i].time,dateBegin)>0&&dateDiff(points[i].time,dateEnd)<0) //时间差之内的，其实这段可以不同写的，从数据库返回的就是已经是这个时间段的了
            {
                searchRes.push(points[i]);
            }
        };

        trackTime(points[0].time);//这里主要是为了把获取到的第一个点的时间设为时钟的起始时间，这样用户可以不等待。
    for(var j=0;jvar wait=dateDiff(searchRes[j].time,points[0].time)*1000;
        //为每个点设置等待时间，所以算一个距离起始时间的时间差，后面有dateDiff这个函数
        (function(){
            var pointAg=[searchRes[j]],timer;
            console.log(j+" "+pointAg[0]);
            timer=setTimeout(function()
            {
                var doneLen=donePoints.length; 
                var linePoints=[];
                if(doneLen!=0)
                {
                    linePoints.push(donePoints[doneLen-1]);
                } //如果地图上已经有点的话就获取上一个画上去的点坐标，这样我们才可以画新的折线。

                linePoints.push(pointAg[0]);//pointAg[0]实际就是一个点，刚才也push了一个，现在可以画线了
                donePoints.push(pointAg[0]);//把现在的点放到donePoints里
                addLine(linePoints); //画线
                addMarker(pointAg);  //为每个点标注
                bPoints.push(new BMap.Point(pointAg[0].lon,pointAg[0].lat)); //为了自适应Zoom
                setZoom(bPoints);  //后面有这个函数，百度API提供的功能
            },(wait/velocity)) //要除一个velocity
            timerArr.push(timer);
        })()
    }


    }, "json");

}
//根据点信息实时更新地图显示范围，让轨迹完整显示。设置新的中心点和显示级别
function setZoom(bPoints){
    var view = map.getViewport(eval(bPoints));
    var mapZoom = view.zoom;
    var centerPoint = view.center;
    map.centerAndZoom(centerPoint,mapZoom);
}

//在轨迹点上创建图标，并添加点击事件，显示轨迹点信息。points,数组。
function addMarker(points)
{
    var pointsLen = points.length;
    if(pointsLen == 0){
        return;
    }


    // 创建标注对象并添加到地图
    for(var i = 0;i var point = new BMap.Point(points[i].lon,points[i].lat);
        var marker = new BMap.Marker(point);
        var label=new BMap.Label(points[i].time,{offset:new BMap.Size(20,-10)});
        map.addOverlay(marker);
        marker.setLabel(label);

    }
}
//添加线
function addLine(points)
{
    var linePoints=[];
    var pointsLen=points.length;
    if(pointsLen==0)
    {return;}
    for(var i=0;inew BMap.Point(points[i].lon,points[i].lat));
    }
    var polyline=new BMap.Polyline(linePoints,{strokeColor:"red",strokeWeight:5,strokeOpacity:1})
    map.addOverlay(polyline);
}
function trackTime(beginTime)
{
    var beginTimestamp=Date.parse(new Date(beginTime));
    interval=setInterval(function()
    {
        var time=getDate(beginTimestamp).time;
        document.getElementById('realTime').innerHTML="回放时间:"+time;
        beginTimestamp=beginTimestamp+1000*velocity;
    },1000);
}
//传入一个毫秒，根据不同需求获取不同类型时间
function getDate(ms)
{
    var res;
    if(ms!=undefined)
    {
        var today=new Date();
        today.setTime(ms);
    }
    else
    {
        var today=new Date();
    }

    var year,month,day,hour,minute,second;
    year=today.getFullYear();
    month=today.getMonth()+1;
    if(month<10)
    {
        month='0'+month;
    }
    day=today.getDate();
    if(day<10)
    {
        day='0'+day;
    }
    hour=today.getHours();
    if(hour<10)
    {
        hour='0'+hour;
    }
    minute=today.getMinutes();
    if(minute<10)
    {
        minute='0'+minute;
    }
    second=today.getSeconds();
    if(second<10)
    {
        second='0'+second;
    }
    res={
        'y':year,
        'M':month,
        'd':day,
        'h':hour,
        'm':minute,
        's':second,
        "time":year+"-"+month+"-"+day+" "+hour+':'+minute+":"+second,
        "date":year+"-"+month+"-"+day
    }
    return res;
}
//算时间差的
function dateDiff(date1,date2)
{
    var type1=typeof date1, type2=typeof date2;
    if(type1=='string')
        date1=stringToTime(date1);
    else if(date1.getTime)
        date1=date1.getTime();
    if(type2=='string')
        date2=stringToTime(date2);
    else if(date2.getTime)
        date2=date2.getTime();
    return (date1-date2)/1000; //秒
}

function stringToTime(string){
    var f = string.split(' ', 2);
    var d = (f[0] ? f[0] : '').split('-', 3);
    var t = (f[1] ? f[1] : '').split(':', 3);
    return (new Date(
        parseInt(d[0], 10) || null,
        (parseInt(d[1], 10) || 1)-1,
        parseInt(d[2], 10) || null,
        parseInt(t[0], 10) || null,
        parseInt(t[1], 10) || null,
        parseInt(t[2], 10) || null
    )).getTime();

}

这是我的效果：

就到这里吧~希望会对大家有所帮助