Polylinien für Routen anpassen

In diesem Dokument wird beschrieben, wie Sie Routenpolylinien für die Karte anpassen, die Sie in Ihrer webbasierten App zur Routenverfolgung für Privatnutzer und Flottenbetreiber 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 Fahrt 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 werden Polylinien auf Routen mit Anpassungsparametern gestaltet. 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 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 Daten aus Quellen außerhalb der Fleet Engine zusammenführen und das Polyline-Objekt anhand dieser Informationen formatieren.

Parameter für die Anpassung

Für die Gestaltung von Polylinien können Sie die in FleetEngineShipmentLocationProviderOptions bereitgestellten Parameter verwenden. 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 verwenden, um Polylinien für Routen zu gestalten

Im folgenden Beispiel wird gezeigt, wie Sie den Stil für eine aktive Polylinie auf Routen konfigurieren. 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.taskTrackingInfo.remainingDrivingDistanceMeters;
    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: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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 Polylinien für Routen festlegen

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