百度地图路书删除标注、获取播放进度方法,实现路书播放功能
先放一张图,这是改完后的路书显示效果
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、速度的调整,直接动态修改路书的配置参数,暂时还未测试