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

Stil für Routenpolylinien

Ähnlich wie bei Markierungen können Sie Polylinien für Routen mithilfe von Anpassungsparametern gestalten. Dort können Sie das Design mit einer der folgenden Methoden konfigurieren:

• Am einfachsten: Verwenden Sie PolylineOptions, um diese beim Erstellen oder Aktualisieren auf alle übereinstimmenden Polyline-Objekte anzuwenden.
• 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 FleetEngineShipmentLocationProviderOptions. 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

Das folgende Beispiel zeigt, wie Sie den Stil für ein Polyline-Objekt mit PolylineOptions konfigurieren. Folgen Sie diesem Muster, um den Stil eines beliebigen Polyline-Objekts mithilfe einer der zuvor 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.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 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};