百度地图API实现轨迹动态移动

先看实现效果

1，先实例化百度地图，再在此实例上进行操作

 var map = new BMap.Map("allmap");
          map.centerAndZoom(new BMap.Point(116.404, 36.015), 6);
         map.enableScrollWheelZoom(true); //启动滚轮放大缩小
          map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
           map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
           map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

2，实例化一个驾车对象DrivingRoute

 var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map,    autoViewport: true}});
      // map.clearOverlays()
       driving.search(p1, p2);//自动获得一个从p1到p2的驾车实例，一般有多个方案，默认选取第一个方案

3，为驾车实例设置回调函数

 driving.setSearchCompleteCallback(function(){

          // map.clearOverlays()

           var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列路径上所以点的组成的数组

           var paths = pts.length; //获得点的个数

            console.log(paths);

           var point = pts[0];//设置起始点为point

           var markers =  addMarker(point,index) //起始点上实例化一个标点

           var marks = addmarker(p2,start_name,end_name)//为终点添加信息框



		    map.addOverlay(markers);

4，实现点和轨迹动画的关键。设置一个递归函数，i为轨迹中第i个点，在i与i+1之间添加线段，直到i等于终点，在整体上就相当于轨迹移动。

 var i=0;
          function dynamic(i){
             dynamicLine(pts[i].lng,pts[i].lat);//dynamicLine实现在i与i+1之间添加线段，下有参考代码
             if(i+10< paths){   //
                  setTimeout(function(){
                   i=i+10;//我这里是在i与i+10之间添加线段。
                    markers.setPosition(pts[i]);   //特别注意一下迭代的顺序
                    dynamic(i);
                   },1);
             }
          }
          dynamic(i);

5，dynamicLine参考代码：

function dynamicLine(lng,lat){
			var lng =lng;  //100+getRandom(40);;
			var lat =lat;  //35+getRandom(30);
			var point = [lng,lat];
			var newLinePoints = [];
			var len;
			//addMarker(point);//增加对应该的轨迹点
			points.push(point);
			bPoints.push(new BMap.Point(lng,lat));
			len = points.length;
		    newLinePoints = points.slice(len-2, len);//最后两个点用来画线。

			addLine(newLinePoints);//增加轨迹线
			//setZoom(bPoints);
			//setTimeout(dynamicLine, 1000);
		}
		 function addLine(points){

			var linePoints = [],pointsLen = points.length,i,polyline;
			if(pointsLen == 0){
				return;
			}
			// 创建标注对象并添加到地图
			for(i = 0;i <pointsLen;i++){
				linePoints.push(new BMap.Point(points[i][0],points[i][1]));
			}

			var line = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
	         map.addOverlay(line); //添加到地图中
		}

6，完整代码

function route(start,end,type,start_name,end_name){


     map.clearOverlays()
	 var points = []//[[104.067588,30.58204],[116.412175,39.920125]];//原始点信息数组
	 var bPoints = [];//百度化坐标数组。用于更新显示范                                                                     //当折线未加载完的时候，clear无法清除折线

     var p1 = start;
     var p2 =  end;//已经包装好的点

      index = -1;


      if (type=="自驾"||type=="乘车"){
         index=0;
         var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map,    autoViewport: true}});
      // map.clearOverlays()
       driving.search(p1, p2);
       //driving.enableAutoViewport()


       driving.setSearchCompleteCallback(function(){

          // map.clearOverlays()

           var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组

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

            console.log(paths);

           var point = pts[0];

           var markers =  addMarker(point,index)

           var marks = addmarker(p2,start_name,end_name)



		    map.addOverlay(markers);

          var i=0;
          function dynamic(i){
             dynamicLine(pts[i].lng,pts[i].lat);
             if(i+10< paths){            //
                  setTimeout(function(){
                   i=i+10;
                    markers.setPosition(pts[i]);   //特别注意一下迭代的顺序
                    dynamic(i);



                   },1);
             }
          }
          dynamic(i);

        })//driving回调函数结束


       }//if结束
      else if (type=="高铁"||type=="火车"){                      //无高铁，用火车代替
       index=1;

              var transit = new BMap.TransitRoute(map,
 {
     renderOptions: {map: map} ,
     onSearchComplete: function(result) {
        console.log("eee");
        if (transit.getStatus() == BMAP_STATUS_SUCCESS) {
            // 从结果对象中获取起点和终点信息

               // var plan = result.getPlan(0);
                // console.log(typeof(plan.getNumRoutes()));
            console.log("aaa");
            //plan.getNumRoutes()
        }
     }
 }
);
transit.search(p1,p2);
//transit.enableAutoViewport();
//成都104.067588,30.58204
//北京116.412175,39.920125
//郑州113.618085,34.758592
//重庆106.569621,29.573985
//上海121.48054,31.232965
//广州113.27875,23.137949
//var start= new BMap.Point(104.067588,39.58204);
//var end = new BMap.Point(116.412175,39.920125);
//transit.search(new BMap.Point(113.27875,23.137949), new BMap.Point(121.48054,31.232965));

 //console.log( transit.getStatus());
//var pt= transit.getResults().getPlan(0).getRoute(0).getPath();
// var phs = pt.length;
// console.log("aaaaaa");

       }
      else if (type=="飞机"){
       index=2;
        map.clearOverlays()

       var markers =  addMarker(end,index)
	   map.addOverlay(markers);

	   var points = [start,end];
	   bPoints.push(start);
	    bPoints.push(end);
	   var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
	   map.addOverlay(curve); //添加到地图中
	   setZoom(bPoints);

       }
      else {
         index = 3;
          map.clearOverlays()
         var markers =  addMarker(end,index)
	   map.addOverlay(markers);
	   var points = [start,end];
	   var line = new BMap.Polyline(points, {strokeColor:"yellow", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
	   map.addOverlay(line); //添加到地图中
	    bPoints.push(start);
	    bPoints.push(end);
	   setZoom(bPoints);
         }
 //添加点
  function addMarker(point,index){

          var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {

         offset: new BMap.Size(10, 25),

           imageOffset: new BMap.Size(0, 0 - index* 25)

           });

       var markers = new BMap.Marker(point, {icon: myIcon});
         return markers;

  }


  //添加线
  function addLine(points){

			var linePoints = [],pointsLen = points.length,i,polyline;
			if(pointsLen == 0){
				return;
			}
			// 创建标注对象并添加到地图
			for(i = 0;i <pointsLen;i++){
				linePoints.push(new BMap.Point(points[i][0],points[i][1]));
			}

			var line = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
	         map.addOverlay(line); //添加到地图中
		}

  //添加动画
   function dynamicLine(lng,lat){
			var lng =lng;  //100+getRandom(40);;
			var lat =lat;  //35+getRandom(30);
			var point = [lng,lat];
			var newLinePoints = [];
			var len;
			//addMarker(point);//增加对应该的轨迹点
			points.push(point);
			bPoints.push(new BMap.Point(lng,lat));
			len = points.length;
		    newLinePoints = points.slice(len-2, len);//最后两个点用来画线。

			addLine(newLinePoints);//增加轨迹线
			//setZoom(bPoints);
			//setTimeout(dynamicLine, 1000);
		}
   //设置随机数
   function getRandom(n){
			return Math.floor(Math.random()*n+1)
	    }
    //设置视图等级
   function setZoom(bPoints){
			var view = map.getViewport(eval(bPoints));
			var mapZoom = view.zoom;
			var centerPoint = view.center;
			map.centerAndZoom(centerPoint,mapZoom);
		}

}

7，代码看起来有些长，其实逻辑比较简单，希望读者有所收获~~