Polylinien für Routen anpassen

In diesem Dokument wird beschrieben, wie Sie Polylinien für Routen für die Karte anpassen, die Sie in Ihrer webbasierten Kaufprozess-App.

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 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 können Sie Routenpolylinien mithilfe von Anpassungsparametern gestalten. 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 langsamer voranschreitet. Sie können sogar Joins aus Quellen außerhalb von Fleet Engine verwenden und gestalten Sie das Polyline-Objekt basierend auf diesen Informationen.

Anpassungsparameter

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

• Bereits zurückgelegte Wege: Verwenden Sie takenPolylineCustomization.
• Aktiv zurückgelegte Strecke: Verwenden Sie activePolylineCustomization.
• Noch nicht zurückgelegter Pfad: Verwenden Sie remainingPolylineCustomization.

„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.

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

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

Anpassungsfunktionen zum Stilisieren von Routenpolylinien verwenden

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 zum Anpassen von Routenlinien.

// 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 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:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};