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 private Nutzer und Flottenbetreiber verwenden.

Mit dem Consumer SDK können Sie die Sichtbarkeit der Routen-Polylinie steuern oder die Routen-Polylinie 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 Routenpolylinien mit Anpassungsparametern gestalten. Dort können Sie das Styling mit einer der folgenden Methoden konfigurieren:

  • Am einfachsten: Verwenden Sie PolylineOptions, um alle übereinstimmenden Polyline-Objekte beim Erstellen oder Aktualisieren anzuwenden.
  • Erweitert: Geben Sie eine Anpassungsfunktion an. Mit Anpassungsfunktionen können Objekte basierend auf Daten, die von Fleet Engine gesendet werden, individuell gestaltet werden. Die Funktion kann das Styling jedes Objekts basierend auf dem aktuellen Status der Route ändern, z. B. das Polyline-Objekt in einer dunkleren Farbe 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 Festlegen des Stils von Routenpolylinien verwenden Sie Parameter, die in FleetEngineShipmentLocationProviderOptions angegeben sind. Diese Parameter ermöglichen verschiedene Pfadstatus während der Fahrt des Fahrzeugs:

„PolylineOptions“ verwenden

Das folgende Beispiel zeigt, wie Sie das Styling für ein Polyline-Objekt mit PolylineOptions konfigurieren. 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 die aktive Route konfigurieren. Folgen Sie diesem Muster, um den Stil eines beliebigen Polyline-Objekts mit einem der oben aufgeführten Parameter für die Anpassung von Routenpolylinien anzupassen.

JavaScript

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

TypeScript

// 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 Routenpolylinien steuern

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};