调用百度地图jsAPI,动态传入点坐标,怎么实现行驶轨迹回放功能?

根据官网的demo,小弟想到的方法是通过路书(BMapLib.LuShu)类来实现,但是在var driving = new BMap.DrivingRoute的构造函数中,调用driving.search,在添加途经点的时候,由于该方法只支持10个途经点(项目有成千上百个点),出现了bug。。具体问题如下:
如图:
clipboard.png
clipboard.png
这样就导致我的法拉利开不完全程。。。。。
附上代码:

var map = new BMap.Map("container");
// 创建点坐标  
var point = new BMap.Point(113.184439,22.989369);
// 初始化地图,设置中心点坐标和地图级别 
map.centerAndZoom(point,13);
//启用滚轮放大缩小,默认禁用
map.enableScrollWheelZoom(true);
var lushu;
// alert
    function showPoly(pointList){
        //循环显示点对象
        for(let c=0;c<pointList.length;c++){
            // Marker(point: Point, opts: MarkerOptions)    创建一个图像标注实例。
            // point参数指定了图像标注所在的地理位置
            console.log(c)
            let marker = new BMap.Marker(pointList[c]);
            // addOverlay,覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次
            map.addOverlay(marker);
            //将途经点按顺序添加到地图上
            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,//是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整
                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,//是否设置marker随着道路的走向进行旋转
                landmarkPois: [
                   {lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2},
                   {lng:116.315391,lat:39.964429,html:'高速公路收费<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)
           //注意这里的终点如果是11的倍数的时候,数组可是取不到最后一位的,所以要注意终点-1
           driving.search(pointList[i*11], pointList[(i+1)*11-1],{waypoints:waypoints});//waypoints表示途经点
        }   
        if( mode != 0){
            console.log("mode!0")
            var waypoints = pointList.slice(group*11,pointList.length-1);//多出的一段单独进行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();
})
阅读 5.8k
1 个回答

把点保存在一个数组里面,需要回放,遍历呗

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题