Come disegnare una freccia su ogni segmento di polilinea su Google Maps V3

Question

Stavo cercando una soluzione a questo problema su StackOverflow ma poiché non sono riuscito a trovare la soluzione accurata ho finito per risolverlo da solo e postarlo qui, spero che sia Aiuto.

Google Maps fornisce la funzione Polilinea, che in base a un elenco di coordinate può tracciare una serie di linee che le uniscono tutte.

È possibile disegnare una polilinea con una singola freccia con il seguente codice:

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

Il problema qui è che la freccia sarà utilizzata solo in ultimo segmento come mostrato nella immagine successiva, ma a volte il percorso potrebbe non essere così semplice e abbiamo bisogno di aggiungere una freccia su ogni segmento.

L'attributo 'repeat' all'interno della definizione dell'icona potrebbe essere un'altra opzione ma consente solo di definire una misura in pixel e tale definizione non corrisponderà ad ogni cambio di direzione sulla polilinea.

Così, in un modo che ho trovato per raggiungere questo obiettivo è stato quello di fare diverse polilinee, uno per ogni segmento permettendo in tal caso la freccia per essere disegnato su ciascuno di essi. Questo è il codice:

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

    } 

E questo è il quadro:

Spero che questo funziona per chi è alla ricerca di qualcosa di simile!

Answer 1

C'è una proprietà di ripetizione per l'oggetto opzioni icona. Il example of dashed lines from the Google Maps JS API mostra un modo per farlo con simboli ripetuti sulla linea invece di creare nuove polilinee. Nel contesto del tuo esempio, sarebbe simile a questa:

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