Jak dodać kierunek na ścieżce śledzenia dla map Google

Question

Wyświetlam śledzenie na mapie za pomocą punktów znacznika i linii łączącej je.

Problem polega na tym, że chcę pokazać kierunek podróży na łączach;

więc nie mam sposobu, aby pokazać kierunek na linii między punktami znacznika.

Czy istnieje sposób na wykonanie tego zadania.

Answer 1

Wskazanie kierunku polilinii można uzyskać za pomocą strzałek.

Istnieje kilka predefiniowanych ścieżek, które zapewnia aplikacja map Google.

Zobacz ten rozdział dokumentacji - SYMBOLS ON POLYLINE, który może być używany inaczej niż strzałka.

Spójrz na to skrzypce, które używa strzałki, aby wskazać kierunek na polilinii.

DEMO with a sigle symbol

Można również ustawić właściwość repeat dla symbolu tak, że powtarza się dla regularnych odstępach czasu.

DEMO with repeating symbols

Javascript-

var iconsetngs = { 
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW 
}; 
var polylineoptns = { 
    path: markers, 
    strokeOpacity: 0.8, 
    strokeWeight: 3, 
    map: map, 
    icons: [{ 
     icon: iconsetngs, 
     offset: '100%'}] 
}; 
polyline = new google.maps.Polyline(polylineoptns); 

Interesującą cechą tego symbolu predefiniowanym (strzałka do przodu specjalnie) jest to, że strzałka kierunku dokładnym kierunku którego twoi koordynuje są położone. To oczywiście służy celom oznaczania kierunku w systemie śledzenia.

AKTUALIZACJA: Not sure about the point próbujesz powiedzieć w komentarzach. Znaczniki mogą być wyświetlane w ten sam sposób. Oto kod, który dodaje znaczniki z pętli, a także ustawić łamaną ze strzałkami:

DEMO WITH MARKERS AND POLYLINE

javascript:

var polylineoptns = { 
     strokeOpacity: 0.8, 
     strokeWeight: 3, 
     map: map, 
     icons: [{ 
      repeat: '70px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS 
      icon: iconsetngs, 
      offset: '100%'}] 
    }; 
    polyline = new google.maps.Polyline(polylineoptns); 
    var z = 0; 
    var path = []; 
    path[z] = polyline.getPath(); 
    for (var i = 0; i < markers.length; i++) //LOOP TO DISPLAY THE MARKERS 
    { 
     var pos = markers[i]; 
     var marker = new google.maps.Marker({ 
      position: pos, 
      map: map 
     }); 
     path[z].push(marker.getPosition()); //PUSH THE NEWLY CREATED MARKER'S POSITION TO THE PATH ARRAY 
    }