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

Question

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

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

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