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

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

Google Maps为您提供了多段线功能，该功能基于坐标列表，可以绘制一系列连接所有坐标的直线

可以使用以下代码使用单个箭头绘制多段线：

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

    }

var allCoordinates=[
新的google.maps.LatLng（26.291148.027），
新的google.maps.LatLng（26.291150.027），
新的google.maps.LatLng（22.291153.027），
新google.maps.LatLng（18.291153.027）
];
对于（变量i=0，n=allCoordinates.length；i

这是照片：

---

我希望这对任何想找这样东西的人都有用

图标选项对象有一个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)
];

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

这将沿直线创建箭头，如下所示：

---

这是一个版本，它有一个更简单的循环和一个自定义符号，因此您可以根据需要调整和修改它的大小。

google.maps.SymbolPath.FORWARD\u CLOSED\u箭头是一个固定的大小。
scale
属性不会影响它

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

const drawines=（地图、地图、地点）=>{
常数箭头={
路径：“m0,05,15-5,150,0z'，//0,0是箭头的尖端
fillColor:'红色'，
不透明度：1.0，
strokeColor:'红色'，
冲程重量：1，
};
常量换行符=[]；
for（设i=0；i

我一直在寻找沿路线放置箭头的方法。该路线将是通过Google Maps DirectionService绘制的多段线的路径（该服务为您提供通过您拥有的特定坐标的路线）。这里提供的解决方案适用于自绘制多段线，该多段线的顶点分隔良好。但是DirectionService绘制的多段线的顶点可能太近（例如，用于绘制环行交叉口的顶点）。在这种情况下，你的绝妙解决方案是无效的。如果有人对我谈论的问题有解决方案，我真的很想听听。我解释的解决方案是沿着路线画箭头。您正在寻找的解决方案是这样做，但要防止为宽度很短的线段（顶点太近）添加箭头。调整上述算法并不困难，您应该检查每个坐标的每两个坐标（在“for”内）之间的距离，如果它们低于所需的阈值，则在这种情况下创建不带图标的多段线，否则使用当前箭头图标添加多段线。我希望有帮助！我遇到这个问题是因为。你能把你的问题的答案放到答题栏里，而不是把问题和答案都放在问题里吗？（并且在你做的时候去掉箭头标记。）@martín-c-你有机会测试这个解决方案吗？有点晚了，但我添加了一个示例屏幕截图