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 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
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.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
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.
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};