Как нарисовать стрелку на каждом сегменте полилинии на Картах Google V3

Я искал решение этой проблемы в stackoverflow, но поскольку я не мог найти точного решения, я в конечном итоге решил его сам и разместил здесь, надеюсь, что это поможет.

Карты Google предоставляют вам функцию Polyline, которая на основе списка координат может нарисовать ряд строк, соединяющих их все.

Вы можете нарисовать полилинию с помощью одной стрелки со следующим кодом:

     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' внутри определения значка может быть другим вариантом, но позволяет определять меру в пикселях и что определенность не будет соответствовать каждому изменению направления на полилинии.

PICTURE1

Итак, один из способов, который я нашел для этого, состоял в том, чтобы сделать несколько полилиний, по одному на сегмент, позволяя в этом случае стрелку рисовать на каждом из них. Это код:

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

    }

И это изображение:

PICTURE2

Я надеюсь, что это сработает для тех, кто ищет что-то вроде этого!

ОТВЕТЫ

Ответ 1

Существует свойство повтора для объекта параметров значка. пример пунктирных линий из JS API 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: '20px'
    }]
});
polyline.setMap(map);
polylines.push(polyline);

Это создает стрелки вдоль линий следующим образом:

map

Ответ 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);
  }
}

map