Jak narysować strzałkę na każdym segmencie polilinii w Mapach Google V3

Question

Szukałem rozwiązania tego problemu na stackoverflow, ale ponieważ nie mogłem znaleźć dokładnego rozwiązania, sam go rozwiązałem i zamieszczam tutaj, mam nadzieję, że Wsparcie.

Google Maps udostępnia funkcję Polilinii, która na podstawie listy współrzędnych może narysować serię linii łączących je wszystkie.

można narysować polilinię z pojedynczą strzałką z następującego kodu:

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

Problem polega na tym, że strzałka zostanie opracowany dopiero w ostatnim segmencie, jak pokazano na kolejnym rysunku, ale czasami trasa może nie być tak prosta i musimy dodać strzałkę w każdym segmencie.

Atrybut "powtórz" w definicji ikony może być inną opcją, ale pozwala tylko zdefiniować miarę w pikselach, a ostateczność nie będzie pasować do każdej zmiany kierunku na polilinie.

Więc jeden sposób znalazłem się achive to było zrobić kilka polilinie, po jednym w każdym segmencie pozwalając w tym przypadku strzałkę być sporządzony na każdym z nich. Jest to kod:

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

    } 

A oto zdjęcia:

Mam nadzieję, że to działa dla każdego, kto szuka czegoś takiego!

Answer 1

Istnieje właściwość repeat dla obiektu opcji ikony. example of dashed lines from the Google Maps JS API pokazuje sposób, aby to zrobić z powtarzaniem symboli na linii, zamiast tworzyć nowe polilinie. W kontekście Twojego przykładu będzie wyglądać mniej więcej tak:

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