Mit der JavaScript-Bibliothek für die Flottenverfolgung können Sie das Erscheinungsbild von Markierungen anpassen, die der Karte hinzugefügt werden. Dazu geben Sie Markierungsanpassungen an, die von der Flottenverfolgungsbibliothek angewendet werden, bevor Markierungen der Karte hinzugefügt werden und bei jeder Markierungsaktualisierung. Sie haben folgende Möglichkeiten, das Erscheinungsbild von Markierungen anzupassen:
Markierungen nach Typ gestalten: Geben Sie ein
MarkerOptions-Objekt an, um Markierungen desselben Typs zu gestalten. Die von Ihnen angegebenen Änderungen werden dann nach dem Erstellen jeder Markierung angewendet und überschreiben alle Standardoptionen. Beispiele finden Sie in diesem Leitfaden unter Markierungen nach Typ gestalten.Markierungen basierend auf Daten gestalten: Sie können eine Anpassungsfunktion basierend auf Daten angeben und Markierungen interaktive Funktionen wie die Klickbearbeitung hinzufügen. Sie können das Styling auf Daten aus der Flottenverfolgung oder aus externen Quellen stützen:
Daten aus der Flottenverfolgung: Bei der Flottenverfolgung werden Daten an die Anpassungsfunktion übergeben, einschließlich des Typs des Objekts, das die Markierung darstellt: Fahrzeug, Haltestelle oder Aufgabe. Die Markierungsformatierung ändert sich dann je nach aktuellem Status des Markierungselements. Das kann beispielsweise die Anzahl der verbleibenden Stopps oder die Art der Aufgabe sein.
Externe Quellen: Sie können Flottenverfolgungsdaten mit Daten aus Quellen außerhalb von Fleet Engine kombinieren und die Markierung auch auf Grundlage dieser Informationen gestalten.
Beispiele finden Sie unter Markierungen basierend auf Daten gestalten.
Klickbearbeitung für Markierungen hinzufügen: Beispiele finden Sie unter Klickbearbeitung hinzufügen.
Sichtbare Markierungen filtern: Mit den Filterfunktionen des JavaScript-Standortanbieters können Sie festlegen, welche Markierungen angezeigt werden. Beispiel:
Markierungen anpassen, um das Lieferfahrzeug einer geplanten Aufgabe zu verfolgen: Sie können Markierungen anpassen, um Fahrzeuge zu verfolgen. Weitere Informationen finden Sie unter Markeranpassung zum Verfolgen eines Lieferfahrzeugs verwenden.
Optionen zum Anpassen von Markierungen
Die Bibliothek für die Flottenverfolgung bietet die folgenden Anpassungsparameter:
Parameter für die Anpassung von Fahrten auf Abruf
Parameter für die Anpassung geplanter Aufgaben
Marker nach Typ formatieren
Das folgende Beispiel zeigt, wie Sie das Styling einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt konfigurieren. Folgen Sie diesem Muster, um das Styling einer beliebigen Markierung mit einer der in Optionen zum Anpassen von Markierungen aufgeführten Optionen anzupassen.
Beispiel für On-Demand-Fahrten
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Beispiel für geplante Aufgaben
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Markierungen basierend auf Daten gestalten
Das folgende Beispiel zeigt, wie Sie das Styling einer Fahrzeugmarkierung mit Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um das Design eines beliebigen Markers basierend auf Daten mit einer der oben unter Optionen zum Anpassen von Markern aufgeführten Optionen anzupassen.
Beispiel für On-Demand-Fahrten
JavaScript
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
Beispiel für geplante Aufgaben
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
Markierungen mit Klickbearbeitung versehen
Das folgende Beispiel zeigt, wie einer Fahrzeugmarkierung die Klickbehandlung hinzugefügt wird. Folgen Sie diesem Muster, um das Klicken auf einen Marker zu ermöglichen. Verwenden Sie dazu eine der oben unter Optionen zum Anpassen von Markern aufgeführten Optionen.
Beispiel für On-Demand-Fahrten
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Beispiel für geplante Aufgaben
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Sichtbare Markierungen filtern
Wenn Sie setVisible verwenden müssen, folgen Sie diesem Muster, um Markierungen mit einer der oben unter Optionen zum Anpassen von Markierungen aufgeführten Optionen zu filtern.
Beispiel für On-Demand-Fahrten
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
Beispiel für geplante Aufgaben
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};