Polylinien für Routen anpassen

In diesem Dokument erfahren Sie, 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 von Polylinien auf Routen festlegen oder die Polylinie der Route 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.

Stile für Polylinien für Routen festlegen

Ähnlich wie bei Markierungen können Sie Polylinien für Routen mithilfe von Anpassungsparametern gestalten. Anschließend können Sie Stile mit einem der folgenden Ansätze konfigurieren:

• Einfachste Methode: Verwenden Sie PolylineOptions, um die Änderungen auf alle übereinstimmenden Polyline-Objekte anzuwenden, wenn sie erstellt oder aktualisiert werden.
• Erweitert: Geben Sie eine Anpassungsfunktion an. Anpassungsfunktionen ermöglichen eine individuelle Gestaltung der Objekte auf der Grundlage von Daten, die von Fleet Engine gesendet werden. Die Funktion kann den Stil jedes Objekts basierend auf dem aktuellen Status der Fahrt ändern. Beispielsweise kann das Polyline-Objekt in einer tieferen Schattierung eingefärbt werden oder es wird dicker, wenn das Fahrzeug langsamer fährt. Sie können sogar einen Join aus Quellen außerhalb von Fleet Engine durchführen und das Polyline-Objekt basierend auf diesen Informationen gestalten.

Parameter für die Anpassung

Für die Gestaltung von Polylinien können Sie die in FleetEngineTripLocationProviderOptions bereitgestellten Parameter verwenden. Diese Parameter ermöglichen unterschiedliche Pfadstatus während der Fahrt des Fahrzeugs:

• Bereits zurückgelegte Wege: Verwenden Sie takenPolylineCustomization.
• Aktuell befahrener Weg: Verwenden Sie activePolylineCustomization.
• Noch nicht zurückgelegter Pfad: Verwenden Sie remainingPolylineCustomization.

„PolylineOptions“ verwenden

Das folgende Beispiel zeigt, wie Sie den Stil für ein Polyline-Objekt mit PolylineOptions konfigurieren. Folgen Sie diesem Muster, um das Design eines beliebigen Polyline-Objekts mithilfe der oben aufgeführten Polylinienanpassungen anzupassen.

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

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

Anpassungsfunktionen verwenden, um Polylinien für Routen zu gestalten

Das folgende Beispiel zeigt, wie das Styling für eine Polylinie einer aktiven Route konfiguriert wird. Folgen Sie diesem Muster, um das Design eines beliebigen Polyline-Objekts mithilfe der oben aufgeführten Parameter für die Anpassung von Routenpolylinien anzupassen.

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

// 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 dessen visible-Attribut fest:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};