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

【问题标题】：How to draw an arrow on every polyline segment on Google Maps V3如何在 Google Maps V3 上的每个折线段上绘制箭头
【发布时间】：2015-09-27 02:54:03
【问题描述】：

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

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

图标定义中的“重复”属性可以是另一个选项，但只允许以像素为单位定义一个度量，并且该定义不会与折线上的每个方向变化相匹配。

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

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

    }

这是图片：

我希望这适用于任何正在寻找这样的东西的人！

【问题讨论】：

我一直在寻找一种沿路线放置箭头的方法。这条路线将是通过 Google Maps DirectionService 绘制的折线的路径（它为您提供通过您拥有的某些坐标的路线）。您在此处提供的解决方案适用于自绘制多段线，该多段线的顶点分离良好。但是 DirectionService 绘制的折线可能有顶点太近（例如用于绘制环岛的顶点）。在这种情况下，您的精彩解决方案无效。如果有人对我谈到的问题有解决方案，我真的很想听听。
我解释的解决方案是沿路线绘制箭头。您正在寻找的解决方案是这样做，除了防止为宽度非常短（顶点太近）的线段添加箭头。调整上述算法并不难，您应该检查每个坐标的每两个坐标（在“for”内）之间的距离，如果它们低于您想要的阈值，则在这种情况下创建一条不带图标的折线，否则添加折线与当前箭头图标。希望对您有所帮助！
我遇到这个问题是因为the arrow tag is being burninated。您可以将问题的答案移动到答案帖子中，而不是在问题中同时包含问题和答案吗？（并且当你在它的时候也删除箭头标签。）

标签： javascript google-maps google-maps-api-3 polyline segment

【解决方案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);

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

【讨论】：

@martín-c - 你有机会测试这个解决方案吗？
有点晚了，但我添加了一个示例截图

【解决方案2】：

这是一个具有更简单循环和自定义符号的版本，因此您可以根据需要调整大小和修改它 - google.maps.SymbolPath.FORWARD_CLOSED_ARROW 是固定大小 - 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);
  }
}

【讨论】：