如何在Google地图V3上的每个折线段上绘制箭头
我正在寻找一个解决方案来解决这个问题，但由于我找不到准确的解决方案，我最终自己解决它并将其发布在这里，希望它能帮到你。
谷歌地图为您提供折线功能，该功能基于坐标列表可以绘制一系列连接所有这些线的线。
您可以使用以下代码用单箭头绘制多段线：
var allCoordinates = [
new google.maps.LatLng(26.291, 148.027),
new google.maps.LatLng(26.291, 150.027),
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];
var polyline = new google.maps.Polyline({
path: allCoordinates,
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 2,
geodesic: true,
icons: [{
icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
offset: '100%'
}]
});
这里的问题是，箭头将只在最后一段中绘制，如下图所示，但有时候路线可能不那么直接，我们需要在每个段上添加一个箭头。
图标定义中的属性'repeat'可以是另一个选项，但只允许以像素为单位定义度量，并且definelty不会与多段线上的每个方向变化匹配。
所以，我发现实现这一目标的一种方法是制作多条多段线，每段一条，允许在每个段上绘制箭头。 这是代码：
var allCoordinates = [
new google.maps.LatLng(26.291, 148.027),
new google.maps.LatLng(26.291, 150.027),
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];
for (var i = 0, n = allCoordinates.length; i < n; i++) {
var coordinates = new Array();
for (var j = i; j < i+2 && j < n; j++) {
coordinates[j-i] = allCoordinates[j];
}
var polyline = new google.maps.Polyline({
path: coordinates,
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 2,
geodesic: true,
icons: [{
icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
offset: '100%'
}]
});
polyline.setMap(map);
polylines.push(polyline);
}
这是图片：
我希望这适用于任何正在寻找这样的东西的人！
图标选项对象有一个重复属性。 Google Maps JS API中的虚线示例显示了一种方法，可以在线上重复显示符号而不是创建新的多义线。 在你的例子中，它看起来像这样：
var allCoordinates = [
new google.maps.LatLng(26.291, 148.027),
new google.maps.LatLng(26.291, 150.027),
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];
var polyline = new google.maps.Polyline({
path: allCoordinates,
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 2,
geodesic: true,
icons: [{
icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
offset: '100%',
repeat: '20px'
}]
});
polyline.setMap(map);
polylines.push(polyline);
上一篇: How to draw an arrow on every polyline segment on Google Maps V3