百度地图路书删除标注、获取播放进度方法，实现路书播放功能

zxjwlh 2018-08-29 原文

先放一张图，这是改完后的路书显示效果

1、需求 ——> 2、解决思路 ——> 3、实现方法 ——> 4、后续扩展

1、需求

　　需求大概就是如上图，实现路书的进度播放，可以前进后退，暂停，当鼠标hover小车时显示位置信息(标注)

　　后续（播放速度修改）

2、解决思路

　最初的想法：我把一堆坐标点扔给路书API，路书应该有前进、暂停、后退的方法，然后我再获取下播放进度，自己写个控制条映射起来就差不多了。至于标注，当时没多想。

　然而路书提供的方法如下：http://api.map.baidu.com/library/LuShu/1.2/docs/symbols/BMapLib.LuShu.html

　　除了开始、暂停有用，其他的都没有

　　难点：前进、后退、获取播放进度

3、解决办法

　　需知前提：

　　　　1、这个进度条不是以时间为维度播放的，而是以坐标点（通常进度条是1s前进一下，这个是一个坐标点前进一下）

　　　　2、BMapLib.LuShu(map, path, opts)

　　　　　　{Map} mapBaidu map的实例对象.

　　　　　　{Array} path构成路线的point的数组.

　　　　　　{Json Object} opts可选的输入参数，非必填项（具体在上面的链接里查看）

　前进、后退思路：

　　　　只要每次修改path，重新启动路书，就可以达到类似前进后退的效果

　　　　这里要做的就是清除掉上一次路书

　　　　如何清理？

　　　　　　1、调用 map.clearOverlays(); ，然后重新绘制折线，再启动路书（或者直接设置折线为不可被清除）

　　　　　　2、lushu.stop() 之后再 lushu.start() , 会发现路书重新开始了，这中间肯定有一次清除操作，抠出来执行一次就好了　　　


// 清除代码
// 加在 a.object.extend(c.prototype，{})  第二个参数中 
    _clearMark: function(f){
        this.stop();
        this._map.removeOverlay(this._marker);
        clearTimeout(this._timeoutFlag)
        his._overlay && this._map.removeOverlay(this._overlay);
    },


//外部暴露调用方法  c.prototype.start  跟这个写一起就行

    c.prototype.clear = function(){
        this._clearMark();
    };

　　获取播放进度:

　　　　思路：第一想到的是直接返回进度（百分比类型的），后来想到当前路书中的 path（ BMapLib.LuShu(map, path, opts) ）可能不是全部路程的集合，所以没法定位进度。可以直接返回当前进度的坐标点，进度就自己定位。

　　　　路书小车的移动是通过定时器遍历path集合，然后清除上一个坐标点的maker，再添加下一个maker。所以，我们就可以在这中间把这个变动的坐标点保存下来，再提供个方法获取。这里有个坑是临界点取不到，因为定时器清除的判断条件，不仅有判断坐标点是否走完了，还有行驶速度以及最后几个点的距离判断有没有必要移动小车。所以在这些临界点（起始、结束），需要手动指定下这个返回的坐标值。

　　　　这个改动的地方有点多，就不贴代码了

其他：

　　1、至于标注，就是在移动小车的时候添加一个监听事件，增加相应的信息窗口。然后在下一次移动的时候清除掉上一次的监听事件。

　　2、速度的调整，直接动态修改路书的配置参数，暂时还未测试