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

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

属性＆＃39;重复＆＃39;图标定义中的内容可能是另一种选择，但只允许以像素为单位定义度量，并且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

图标选项对象有重复属性。 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);

这会沿着这样的方式创建箭头：

Answer 2

这里是一个具有更简单的循环和自定义符号的版本，因此您可以根据需要调整大小和修改它-google.maps.SymbolPath.FORWARD_CLOSED_ARROW是固定大小-scale属性不影响它。< / p>

const drawLines = (map, maps, places) => {
  const arrow = {
    path: 'M 0,0 5,15 -5,15 0,0 z', // 0,0 is the tip of the arrow
    fillColor: 'red',
    fillOpacity: 1.0,
    strokeColor: 'red',
    strokeWeight: 1,
  };
  const newLines = [];
  for (let i = 0; i < places.length - 1; i++) {
    const line = new maps.Polyline({
      path: places.slice(i, i+2),
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      icons: [{
        icon: arrow,
        offset: '100%',
      }]
    });
    line.setMap(map);
    newLines.push(line);
  }
}

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

2 个答案: