1.使用百度地图API制作轨迹播放；

可应用于车辆跟踪、行驶线路回放、跑步行程的记录等地图应用场景，

1.1绘制静态轨迹图

获取多个轨迹点point（必须包含经度、纬度）

使用polyline对象依次连接相邻的2个点（注意polyline的个数比point的少1）

1.2绘制动态轨迹图（固定间隔时间）

每隔500毫秒读取一个轨迹点，实现a,b两个功能

a增加一条polyline

b将marker从先前的point移到当前点

主方法使用setTimeout方法迭代来实现动态循环

Polyline在每条迭代循环体中添加即可，marker的移动则可以通过2中方法来实现：

一、使用removeOverlay除去原marker并在当前point处添加新marker

这是当时做项目时想到的方法，由于先前绘制polyline时使用addOverlay的思维惯性，，在绘制marker时也就继续使用了addOverlay做循环迭代。

window.run = function (){

var pts ={?????}//你获取到的一系列点的数组(通过gps或其他接口)

var paths = pts.length;    //获得有几个点

var carMk = new BMap.Marker(pts[0],{icon:myIcon});

map.addOverlay(carMk);

i=0;

function removeMkPoint(i){

if(i < paths){//

setTimeout(function(){

i++;

map.removeOverlay(carMk);//清除前一个marker

removeMkPoint(i);

},100);

}

}

setTimeout(function(){

resetMkPoint(5);

},100)

});

}

setTimeout(function(){

run();

},1500);

二、使用marker的setPosition方法重新设置marker的位置

在项目完成后，我又读了一篇百度api的文档，发现官方demo中使用setPosition方法能很好地实现marker的移动功能

window.run = function (){

var pts ={?????}//你获取到的一系列点的数组(通过gps或其他接口)

var paths = pts.length;    //获得有几个点

var carMk = new BMap.Marker(pts[0],{icon:myIcon});

map.addOverlay(carMk);

i=0;

function resetMkPoint(i){

carMk.setPosition(pts[i]);//重新设置marker的position

if(i < paths){

setTimeout(function(){

i++;

resetMkPoint(i);

},100);

}

}

setTimeout(function(){

resetMkPoint(5);

},100)

});

}

setTimeout(function(){

run();

},1500);

注意：marker的opts属性能自定义marker的icon（汽车、人等图标）、旋转方向、大小、偏移等等属性，另外setAnimation方法还能设置动画效果。

1.3绘制polyline

轨迹线路是由一个一个polyline首尾相连组合起来的，因此，只需要在每次添加marker时添加一个polyline即可，并且在下一轮迭代循环中不需要清除，每条polyline的首尾2个端点就是当前点和上一个时间段的点

var pts0，前一个点 var pts1当前点

var carPl=new BMap.Polyline([pts0,pts1],{strokeColor:‘blue‘,strokeWeight:4,strokeOpacity:0.8});

map.addOverlay(carPl);

pts0=pts1;//每次添加polyline后当前点变为前一个点

1.4添加播放按钮控件控制轨迹播放

添加自定义的播放控件，这里需要使用prototype属性来返回对象类型原型的引用，        这里给出prototype的理解

例如：A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例，可以理解A将B中的方法和属性全部克隆了一遍。这里强调的是克隆而不是继承，其区别在于：A的prototype是B的实例，同时B的prototype也可能是A的实例。

A能使用B的方法和属性，当A、B中都有方法名为f的方法时，A的实例instance调用这个f方法(instance.f)会是A自生的f方法而不是B的f方法，如果A的实例instance想调用B的f方法，需要使用call方法来实现：先new一个B的实例var Binstance=new B(); Binstance.f.call(instance);

function PlayControl(){

// 默认停靠位置和偏移量

this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;

this.defaultOffset = new BMap.Size(10, 40);

}

// 通过JavaScript的prototype属性继承于BMap.Control

PlayControl.prototype = new BMap.Control();

// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回

// 在本方法中创建个input元素作为控件的容器,并将其添加到地图容器中

PlayControl.prototype.initialize = function(map){

// 创建一个DOM元素

var input = document.createElement("input");

input.id="playCtrl";

input.type="image";

input.src="image/play.png";

input.onclick=startPlay()；//startPlay为上一步开始执行setTimeout迭代

};

// 添加DOM元素到地图中

map.getContainer().appendChild(input);

// 将DOM元素返回

return input;

};

// 创建控件

var myPlayCtrl = new PlayControl();

// 添加到地图当中

map.addControl(myPlayCtrl);

1.5将播放按钮设计为可以单击切换播放和停止的按钮

定义一个变量var i=0,在onclick事件触发时，将i在0和1之间不停切换，根据i的值来判断执行开始播放方法和停止方法。