百度地图中轨迹带方向箭头
因为项目需求，要在地图轨迹上假箭头，找了好久，终于找到这篇文章
但是这里有个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的线宽调整到和箭头一样就可以了，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>添加/删除覆盖物</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<input type="button" onclick="add_overlay();" value="添加覆盖物" />
<input type="button" onclick="remove_overlay();" value="删除覆盖物" />
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
var polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920),
new BMap.Point(116.415, 39.910),
new BMap.Point(116.399, 39.910)
], {strokeColor:"blue", strokeWeight:8, strokeOpacity:0.5,
icons:[draw_line_direction(8)]}); //创建折线
map.addOverlay(polyline); //增加折线
function draw_line_direction(weight) {
var icons=new BMap.IconSequence(
new BMap.Symbol('M0 -5 L-5 -2 L0 -4 L5 -2 Z', {
scale: weight/10,
strokeWeight: 1,
rotation: 0,
fillColor: 'white',
fillOpacity: 1,
strokeColor:'white'
}),'100%','5%',false);
return icons;
}
</script>
