小编Mar*_*n C的帖子

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

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

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

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

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

图标定义中的"重复"属性可能是另一种选择,但只允许以像素为单位定义度量,并且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 = …