鍍金池/ 問答/HTML/ 調(diào)用百度地圖jsAPI,動態(tài)傳入點(diǎn)坐標(biāo),怎么實(shí)現(xiàn)行駛軌跡回放功能?

調(diào)用百度地圖jsAPI,動態(tài)傳入點(diǎn)坐標(biāo),怎么實(shí)現(xiàn)行駛軌跡回放功能?

根據(jù)官網(wǎng)的demo,小弟想到的方法是通過路書(BMapLib.LuShu)類來實(shí)現(xiàn),但是在var driving = new BMap.DrivingRoute的構(gòu)造函數(shù)中,調(diào)用driving.search,在添加途經(jīng)點(diǎn)的時(shí)候,由于該方法只支持10個(gè)途經(jīng)點(diǎn)(項(xiàng)目有成千上百個(gè)點(diǎn)),出現(xiàn)了bug。。具體問題如下:
如圖:
clipboard.png
clipboard.png
這樣就導(dǎo)致我的法拉利開不完全程。。。。。
附上代碼:

var map = new BMap.Map("container");
// 創(chuàng)建點(diǎn)坐標(biāo)  
var point = new BMap.Point(113.184439,22.989369);
// 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別 
map.centerAndZoom(point,13);
//啟用滾輪放大縮小,默認(rèn)禁用
map.enableScrollWheelZoom(true);
var lushu;
// alert
    function showPoly(pointList){
        //循環(huán)顯示點(diǎn)對象
        for(let c=0;c<pointList.length;c++){
            // Marker(point: Point, opts: MarkerOptions)    創(chuàng)建一個(gè)圖像標(biāo)注實(shí)例。
            // point參數(shù)指定了圖像標(biāo)注所在的地理位置
            console.log(c)
            let marker = new BMap.Marker(pointList[c]);
            // addOverlay,覆蓋物添加到地圖中,一個(gè)覆蓋物實(shí)例只能向地圖中添加一次
            map.addOverlay(marker);
            //將途經(jīng)點(diǎn)按順序添加到地圖上
            var label = new BMap.Label(c+1,{offset:new BMap.Size(20,-10)});
            marker.setLabel(label);
        }

       var  group = Math.floor( pointList.length /11 ) ;
       var mode = pointList.length %11 ;

       
       
       var driving = new BMap.DrivingRoute( map, {onSearchComplete: function(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());
                }
                map.addOverlay(new BMap.Polyline(arrPois));
                // map.setViewport(arrPois);
                console.log(arrPois)
                lushu = new BMapLib.LuShu(map,arrPois,{
                defaultContent:"",//"從天安門到百度大廈"
                autoView:true,//是否開啟自動視野調(diào)整,如果開啟那么路書在運(yùn)動過程中會根據(jù)視野自動調(diào)整
                icon  : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
                speed: 4500,
                enableRotation:true,//是否設(shè)置marker隨著道路的走向進(jìn)行旋轉(zhuǎn)
                landmarkPois: [
                   {lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2},
                   {lng:116.315391,lat:39.964429,html:'高速公路收費(fèi)<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3},
                   {lng:116.381476,lat:39.974073,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}
                ]});
              }
        }});
        for(let i =0;i<group;i++){
           var waypoints = pointList.slice(i*11+1,(i+1)*11);
           console.log(i)
           //注意這里的終點(diǎn)如果是11的倍數(shù)的時(shí)候,數(shù)組可是取不到最后一位的,所以要注意終點(diǎn)-1
           driving.search(pointList[i*11], pointList[(i+1)*11-1],{waypoints:waypoints});//waypoints表示途經(jīng)點(diǎn)
        }   
        if( mode != 0){
            console.log("mode!0")
            var waypoints = pointList.slice(group*11,pointList.length-1);//多出的一段單獨(dú)進(jìn)行search
            driving.search(pointList[group*11],pointList[pointList.length-1],{waypoints:waypoints});
        }

}

var arrayList = [new BMap.Point(113.184439,22.989369),new BMap.Point(113.384222,22.947576),
new BMap.Point(113.625687,22.921482),new BMap.Point(113.625687,22.921482),
new BMap.Point(114.016055,22.83411),new BMap.Point(114.14771,22.689609),
new BMap.Point(114.338007,22.686408),new BMap.Point(114.465639,22.785605),
new BMap.Point(114.648462,22.941186),new BMap.Point(114.695605,22.99549),
new BMap.Point(114.684825,23.023166),new BMap.Point(114.665853,23.113872),
new BMap.Point(114.926002,23.04658),new BMap.Point(114.927224,23.073647),
new BMap.Point(114.964593,23.090669),new BMap.Point(114.994489,23.136671),
new BMap.Point(114.993051,23.197274),new BMap.Point(114.956832,23.295029),
new BMap.Point(114.925786,23.415),new BMap.Point(115.065491,23.496686),
new BMap.Point(115.128372,23.572294),new BMap.Point(115.006849,23.69009),
new BMap.Point(115.258662,24.106641),new BMap.Point(115.542671,24.373402)] ;

showPoly(arrayList);
$("#startLushu").on('click',function(){
     console.log('啟動了')
      lushu.start();
})
回答
編輯回答
夢囈

把點(diǎn)保存在一個(gè)數(shù)組里面,需要回放,遍歷唄

2017年6月10日 19:09