百度地图中轨迹带方向箭头

因为项目需求,要在地图轨迹上假箭头,找了好久,终于找到这篇文章
但是这里有个BUG,切换线路的时候,之前线路的箭头用map.removeOverlay()删不掉,目前也没有好的解决办法,只能先隐藏了在删除,如下:

removeMarkers = markers => {
    if (markers) {
      if (markers.length > 0) {
        markers.map(item => {
          item.hide();
          this.map.removeOverlay(item);
        });
        markers = [];
      }
    }
  };

百度地图中显示带方向箭头的轨迹

,以下为文章内容
最近工作中客户有个需求,要在百度地图中国显示轨迹,并且在显示轨迹的时候在轨迹内部用箭头表示方向。这样描述是不是有点抽象,上张效果图就知道了。
请输入图片描述

可是这这种轨迹显示只有在导航的API里才有,我找遍了百度地图的JS API都没找到绘制这种轨迹路线的方法。谷歌之,找到一些文章,用的是一种很蛋疼的方法绘制轨迹,就是在原有轨迹的基础上绘制两条呈一定角度的折线,简言之就是手动画一个箭头。这样有一个问题就是在地图缩放的时候,这个箭头的大小会随着缩放级别的变化而变化,最后地图上满是硕大无比的折线。

在被客户吐槽了无数次之后,我们决定继续探索,然后就看到了百度API里有一个IconSequence类。IconSequence,难道是一系列的Icon?如果这个Icon是箭头呢?可是在这个类的文档里只看到一个构造函数,整个API文档里搜这个关键字也没有任何结果。不过构造函数里有两个参数让我看到了一些希望:
repeat为符号在线上重复显示的距离,可以是百分比也可以是距离值,
fixedRotation设置图标的旋转角度是否与线走向一致,默认为true。
这个很明显就是用来在折线上叠加图标的嘛,连方向都解决了。百度之,没有什么建设性的结果。谷歌之,第一个链接就是谷歌地图的API,然后我惊呆了,这个构造函数和百度的一模一样!谷歌竟然抄袭百度的地图API!哈哈!谷歌的文档里搜IconSequence,结果就丰富多了,还直接找到一个范例,这个基本上就是我要的效果了,我只需要把Polyline的线宽调整到和箭头一样就可以了,代码如下。




    
    
    
    
    添加/删除覆盖物


    
?谁还有红包群群发工具使用下载
phantomjs在liunx中报 Error: EACCES: permission denied syscall: 'link'?
上一篇:谁还有红包群群发工具使用下载
下一篇:phantomjs在liunx中报 Error: EACCES: permission denied syscall: 'link'
评论

如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ