Polylinien für Routen anpassen

Plattform auswählen: Android iOS JavaScript

In diesem Dokument wird beschrieben, wie Sie Routenpolylinien für die Karte anpassen, die Sie in Ihrer webbasierten App zur Routenverfolgung für Verbraucher verwenden.

Mit dem Consumer SDK können Sie die Sichtbarkeit der Routenpolylinie steuern oder die Routenpolylinie für die Route einer Fahrt auf der Karte gestalten. Das SDK erstellt für jedes Koordinatenpaar im aktiven oder verbleibenden Pfad der Route ein google.maps.Polyline-Objekt. Die Bibliothek wendet diese Anpassungen dann in zwei Situationen an:

• bevor Sie die Objekte der Karte hinzufügen.
• wenn sich die für die Objekte verwendeten Daten geändert haben

Routenpolylinien gestalten

Ähnlich wie bei Markierungen können Sie Routen-Polylinien mit Anpassungsparametern gestalten. Dort können Sie das Styling mit einer der folgenden Methoden konfigurieren:

• Einfachste Methode: Verwenden Sie PolylineOptions, um sie auf alle übereinstimmenden Polyline-Objekte anzuwenden, wenn sie erstellt oder aktualisiert werden.
• Erweitert: Geben Sie eine Anpassungsfunktion an. Mit Anpassungsfunktionen können die Objekte basierend auf den von Fleet Engine gesendeten Daten individuell gestaltet werden. Die Funktion kann das Styling jedes Objekts basierend auf dem aktuellen Status der Route ändern, z. B. das Polyline-Objekt in einem dunkleren Farbton darstellen oder es dicker machen, wenn sich das Fahrzeug langsamer bewegt. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine zusammenführen und das Polyline-Objekt basierend auf diesen Informationen gestalten.

Anpassungsparameter

Beim Formatieren von Routenpolylinien verwenden Sie Parameter, die in FleetEngineTripLocationProviderOptions bereitgestellt werden. Diese Parameter ermöglichen unterschiedliche Pfadstatus während der Fahrt des Fahrzeugs:

• Bereits zurückgelegte Pfade: Verwenden Sie takenPolylineCustomization.
• Aktuell zurückgelegter Pfad: Verwenden Sie activePolylineCustomization.
• Pfad Noch nicht gefahren: Verwenden Sie remainingPolylineCustomization.

„PolylineOptions“ verwenden

Im folgenden Beispiel wird gezeigt, wie das Styling für ein Polyline-Objekt mit PolylineOptions konfiguriert wird. Folgen Sie diesem Muster, um das Styling eines beliebigen Polyline-Objekts mit einer der oben aufgeführten Polylinienanpassungen anzupassen.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Anpassungsfunktionen zum Formatieren von Routenpolylinien verwenden

Das folgende Beispiel zeigt, wie Sie das Styling für eine Polylinie für eine aktive Route konfigurieren. Folgen Sie diesem Muster, um das Styling eines beliebigen Polyline-Objekts mit einem der oben aufgeführten Anpassungsparameter für Routenpolylinien anzupassen.

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Sichtbarkeit von Routenpolylinien steuern

Standardmäßig sind alle Polyline-Objekte sichtbar. Um ein Polyline-Objekt unsichtbar zu machen, legen Sie das Attribut visible fest:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};