zoukankan      html  css  js  c++  java
  • 百度地图路书删除标注、获取播放进度方法,实现路书播放功能

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

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

                   

  • 相关阅读:
    Linux编辑器- vi / vim
    Java使用POI对Excel进行基本操作(4)-Excel中绘制图片
    Java使用POI对Excel进行基本操作(3)-合并单元格
    Java使用POI对Excel进行基本操作(2)-基本操作和样式设置
    Java使用POI对Excel进行基本操作(1)-概述和maven依赖
    Linux之docker搭建
    docker的个人理解
    python接口自动化-requests-toolbelt处理multipart/form-data
    python3.6安装lxml库
    pytest之assert断言
  • 原文地址:https://www.cnblogs.com/zxjwlh/p/9554855.html
Copyright © 2011-2022 走看看