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

这几天在做和百度地图API有关的工作,为了使轨迹可视化更美观一点,想做成可以回放的效果。基本的效果是:屏幕旁边有个时间戳,时间在增加,轨迹就不断的更新出来。并且可以控制速度。
主要借鉴了这篇博客:http://blog.youkuaiyun.com/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.length;t++)
    {
        clearTimeout(timeArr[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}, 
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值