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 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 mit Anpassungsparameter. Anschließend konfigurieren Sie den Stil mit einer der wie folgt vorgehen:
- Am einfachsten: Verwenden Sie
PolylineOptions
, um hatPolyline
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 dasPolyline
-Objekt basierend auf diesen Informationen.
Anpassungsparameter
Für die Gestaltung von Polylinien für Routen werden Parameter aus den
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.
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 Stile 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.
JavaScript
// 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'});
}
}
};
TypeScript
// 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:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};