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

Question

我正在寻找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 = 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

图标选项对象有一个重复属性.在从谷歌地图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);