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

百度地图路书删除标注、获取播放进度方法,实现路书播放功能-风君雪科技博客

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、速度的调整,直接动态修改路书的配置参数,暂时还未测试