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 Routenpolylinien steuern oder den Stil der Routenpolylinie für die Route einer Fahrt auf der Karte festlegen. 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 Fällen an:

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

Stil für Routenpolylinien

Ähnlich wie bei Markierungen können Sie Routenpolylinien mithilfe von Anpassungsparametern gestalten. Dort können Sie das Design mit einer der folgenden Methoden 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. Mit den Anpassungsfunktionen können die Objekte basierend auf den von der Fleet Engine gesendeten Daten individuell gestaltet werden. Die Funktion kann das Styling jedes Objekts basierend auf dem aktuellen Status der Fahrt ändern. So kann das Polyline-Objekt beispielsweise in einem dunkleren Farbton dargestellt oder dicker dargestellt werden, wenn sich das Fahrzeug langsamer bewegt. Sie können sogar Daten aus Quellen außerhalb der Fleet Engine zusammenführen und das Polyline-Objekt anhand dieser Informationen formatieren.

Parameter für die Anpassung

Wenn Sie Routenpolylinien einrichten, verwenden Sie die Parameter in FleetEngineTripLocationProviderOptions. Diese Parameter ermöglichen unterschiedliche Pfadstatus während der Fahrt des Fahrzeugs:

• Bereits zurückgelegte Pfade: Verwenden Sie takenPolylineCustomization.
• Aktuell befahrener Weg: Verwenden Sie activePolylineCustomization.
• Noch nicht zurückgelegter Pfad: 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 Design eines beliebigen Polyline-Objekts mithilfe der oben aufgeführten Polylinienanpassungen anzupassen.

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

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

Anpassungsfunktionen zum Stilisieren von Routenpolylinien verwenden

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. Wenn Sie ein Polyline-Objekt unsichtbar machen möchten, legen Sie die Eigenschaft visible fest:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};