如何在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

圖標選項對象有一個重復屬性。 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屬性不會影響它。

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