Polylinien für Routen anpassen

In diesem Dokument wird beschrieben, wie Sie Polylinien für Routen für die Karte anpassen, die Sie in Ihre webbasierte Reiseverfolgungs-App für Verbraucher und Flottenbetreiber.

Mit dem Consumer SDK können Sie die Sichtbarkeit von Polylinien auf Routen steuern oder den Stil der Polylinie für die Route einer Reise auf der Karte. Das SDK erstellt eine google.maps.Polyline-Objekt für jedes Koordinatenpaar in der Reiseroute aktiven oder verbleibenden Pfad. Die Bibliothek wendet diese Anpassungen dann zwei Situationen:

  • bevor die Objekte zur Karte hinzugefügt werden.
  • 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 auch Polylinien für Routen mithilfe von Anpassungsparameter an. Anschließend konfigurieren Sie den Stil mit einer der wie folgt vorgehen:

  • Am einfachsten: Verwenden Sie PolylineOptions, um hat Polyline Objekten zugeordnet, wenn sie erstellt oder aktualisiert werden.
  • Erweitert: Geben Sie eine Anpassungsfunktion an. Anpassungsfunktionen ermöglichen eine individuelle Gestaltung der Objekte basierend auf der von Fleet Engine gesendeten Daten. Die Funktion kann den Stil der einzelnen -Objekt auf Basis des aktuellen Stands der Reise; zum Beispiel durch Einfärben des einem Polyline-Objekt einen tieferen Farbton hinzufügen oder ihn dicker machen, wenn das Fahrzeug die langsamer vorankommen. Sie können sogar Joins aus Quellen außerhalb von Fleet Engine verwenden und gestalten Sie das Polyline-Objekt basierend auf diesen Informationen.

Anpassungsparameter

Für die Gestaltung von Polylinien für Routen werden Parameter verwendet, die in FleetEngineShipmentLocationProviderOptions Diese Parameter ermöglichen verschiedene Pfadstatus während der Fahrt des Fahrzeugs:

„PolylineOptions“ verwenden

Das folgende Beispiel zeigt, wie der Stil für ein Polyline-Objekt konfiguriert wird mit PolylineOptions. Folgen Sie diesem Muster, um den Stil anzupassen: Jedes Polyline-Objekt, für das eine der zuvor aufgeführten Polylinienanpassungen verwendet wird.

JavaScript

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

TypeScript

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

Anpassungsfunktionen verwenden, um Polylinien für Routen zu gestalten

Das folgende Beispiel zeigt, wie Sie den Stil für eine aktive Route konfigurieren Polylinie. Folgen Sie diesem Muster, um den Stil eines Polyline-Objekts anzupassen mithilfe der oben aufgeführten Parameter zur Anpassung der Polylinie auf den Verkehr.

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 Polylinien für Routen festlegen

Standardmäßig sind alle Polyline-Objekte sichtbar. So erstellen Sie ein Polyline-Objekt: unsichtbar werden, legen Sie die entsprechende visible-Eigenschaft fest:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};