百度地圖路書刪除標注、獲取播放進度方法,實現路書播放功能


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

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

               

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM