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 Stilmarkierungen nach Typ.Markierungen anhand von Daten gestalten: Sie können eine Anpassungsfunktion auf Grundlage von Daten angeben und Markierungen interaktive Funktionen hinzufügen, z. B. die Verarbeitung von Klicks. Sie können die Darstellung auf Grundlage von Daten aus der Flottenverfolgung oder aus externen Quellen anpassen:
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 Formatierung der Markierung ändert sich dann je nach aktuellem Zustand des Markierungselements. Das kann beispielsweise die Anzahl der verbleibenden Stopps oder der Aufgabentyp 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: Sie können die Markierungen filtern, die mit den Filterfunktionen des JavaScript-Standortanbieters angezeigt werden. Beispiel:
Markierungen anpassen, um ein Fahrzeug für eine geplante Aufgabe zu verfolgen: Sie können Markierungen anpassen, um Fahrzeuge zu verfolgen. Weitere Informationen finden Sie unter Markierungen anpassen, um ein Lieferfahrzeug zu verfolgen.
Optionen zum Anpassen von Markierungen
Die Flottenverfolgungsbibliothek bietet die folgenden Anpassungsparameter:
Parameter für die Anpassung von Fahrten auf Abruf
Parameter für die Anpassung geplanter Aufgaben
Markierungen nach Typ formatieren
Im folgenden Beispiel wird gezeigt, 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
Im folgenden Beispiel wird gezeigt, wie Sie das Styling einer Fahrzeugmarkierung mithilfe von Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um das Styling 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}`);
};
Klickbearbeitung für Markierungen hinzufügen
Im folgenden Beispiel wird gezeigt, wie einem Fahrzeugmarker die Klickbehandlung hinzugefügt wird. Folgen Sie diesem Muster, um einer beliebigen Markierung die Klickbehandlung hinzuzufügen. Verwenden Sie dazu eine der oben unter Optionen zur Anpassung von Markierungen 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);
}
};