先放一張圖，這是改完后的路書顯示效果

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、速度的調整，直接動態修改路書的配置參數，暫時還未測試

　　　　　　　　　　　　　　

總結

以上是生活随笔為你收集整理的百度地图路书删除标注、获取播放进度方法，实现路书播放功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。