javascript - 如何在 Google Maps V3 的每条折线段上绘制箭头

Question

我一直在 stackoverflow 上寻找这个问题的解决方案，但由于找不到准确的解决方案，我最终自己解决了这个问题并将其发布在这里，希望对您有所帮助。

Google map 为您提供折线功能，它可以根据坐标列表绘制一系列连接所有坐标的线。

您可以使用以下代码绘制带有单个箭头的多段线:

     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”可能是另一种选择，但只允许定义以像素为单位的度量，并且该定义不会与折线上的每个方向变化都匹配。

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

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

    }

这是图片:

我希望这对任何正在寻找类似东西的人有用!

Answer 1

图标选项对象有一个重复属性。 example of dashed lines from the 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);

这会像这样沿着线创建箭头: