先放一張圖,這是改完后的路書顯示效果
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、速度的調整,直接動態修改路書的配置參數,暫時還未測試