如何在GoogleMapsV3上的每个折线段上绘制箭头-HowtodrawanarrowoneverypolylinesegmentonGoogleMapsV3

I was looking for a solution to this problem on stackoverflow but since I couldn't find the accurate solution I ended up solving it myself and post it here, hope it help.

我正在寻找stackoverflow上的这个问题的解决方案，但由于我找不到准确的解决方案，我最终自己解决并在此发布，希望它有所帮助。

Google Maps provides you the Polyline feature, which based on a list of coordinates can draw a series of lines joining all of them.

Google地图为您提供折线功能，该功能基于坐标列表可以绘制一系列连接所有线条的线条。

You can draw a polyline with a single arrow with the following code:

您可以使用以下代码使用单个箭头绘制折线：

     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%'
            }]
        });

The problem here is that the arrow will be only drawn in the last segment as shown in the next picture, but sometimes the route could be not so straightforward and we need to add an arrow on every segment.

这里的问题是箭头将仅在最后一段中绘制，如下图所示，但有时路线可能不那么简单，我们需要在每个段上添加一个箭头。

The attribute 'repeat' inside the icon definition could be another option but allows only to define a measure in pixels and that definelty won't match with every change of direction on the polyline.

图标定义中的“重复”属性可能是另一个选项，但只允许以像素为单位定义度量，并且definelty与折线上的每个方向变化都不匹配。

So, one way I found to achive this was to make several polylines, one per segment allowing in that case the arrow to be drawn on each one. This is the code:

因此，我发现实现这一目的的一种方法是制作多条折线，每个区段一条允许在这种情况下在每一条线上绘制箭头。这是代码：

     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 

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);