Mit der JavaScript-Bibliothek für die Fahrzeugverfolgung können Sie das Erscheinungsbild der Markierungen anpassen, die der Karte hinzugefügt werden. Dazu geben Sie Markierungsanpassungen an, die dann von der Bibliothek für die Flottenverfolgung angewendet werden, bevor Markierungen auf der Karte hinzugefügt werden, und bei jeder Markierungsaktualisierung. So können Sie das Erscheinungsbild von Markierungen anpassen:
Markierungen nach Typ formatieren: Geben Sie ein
MarkerOptions-Objekt an, um Markierungen desselben Typs zu formatieren. Die von Ihnen angegebenen Änderungen werden dann nach dem Erstellen jeder Markierung angewendet und alle Standardoptionen überschrieben. Beispiele finden Sie in diesem Leitfaden unter Stilmarkierungen basierend auf dem Typ.Markierungen anhand von Daten formatieren: Sie können eine benutzerdefinierte Funktion auf Grundlage von Daten angeben und Markierungen interaktiv gestalten, z. B. durch Klickbehandlung. Sie können die Darstellung anhand von Daten aus der Flottenverfolgung oder aus externen Quellen anpassen:
Daten aus dem Flotten-Tracking: Das Flotten-Tracking gibt Daten an die Anpassungsfunktion weiter, einschließlich der Art des Objekts, das die Markierung darstellt: Fahrzeug, Haltestelle oder Aufgabe. Das Markierungs-Styling ändert sich dann je nach aktuellem Status des Markierungselements. Beispielsweise die Anzahl der verbleibenden Haltestellen oder die Art der Aufgabe.
Externe Quellen: Sie können Daten aus der Fahrzeugverfolgung mit Daten aus Quellen außerhalb von Fleet Engine kombinieren und die Markierung auch anhand dieser Informationen formatieren.
Beispiele finden Sie unter Markierungen basierend auf Daten stilisieren.
Markierungen eine Klickbehandlung hinzufügen: Beispiele finden Sie unter Klickbehandlung hinzufügen.
Filtern, welche Markierungen sichtbar sind: Mit den Filterfunktionen des JavaScript-Standortanbieters können Sie festlegen, welche Markierungen angezeigt werden. Beispiel:
Mithilfe der Markierungsanpassung ein Lieferfahrzeug für geplante Aufgaben verfolgen: Sie können Markierungen anpassen, um Fahrzeuge zu verfolgen. Weitere Informationen finden Sie unter Lieferfahrzeug mithilfe der Markierungsanpassung verfolgen.
Optionen zur Markierungsanpassung
Die Bibliothek für die Fahrzeugverfolgung bietet die folgenden Anpassungsparameter:
Parameter für die Anpassung von Fahrten auf Abruf
Parameter für die Anpassung geplanter Aufgaben
Markierungen nach Typ stylen
Im folgenden Beispiel wird gezeigt, wie das Design einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt konfiguriert wird. So können Sie das Aussehen einer Markierung mithilfe der Optionen unter Optionen zur Anpassung von Markierungen anpassen.
Beispiel für Fahrten auf Abruf
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 formatieren
Im folgenden Beispiel wird gezeigt, wie Sie das Design einer Fahrzeugmarkierung mithilfe von Anpassungsfunktionen konfigurieren. So können Sie das Aussehen von Markierungen basierend auf Daten mithilfe der oben aufgeführten Optionen für die Anpassung von Markierungen anpassen.
Beispiel für Fahrten auf Abruf
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 eine Klickbehandlung hinzufügen
Im folgenden Beispiel wird gezeigt, wie einer Fahrzeugmarkierung eine Klickbehandlung hinzugefügt wird. So fügen Sie einer Markierung die Klickbehandlung hinzu: Verwenden Sie eine der Optionen unter Optionen zur Markierungsanpassung.
Beispiel für Fahrten auf Abruf
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.
});
}
};
Filtern, welche Markierungen sichtbar sind
Wenn Sie setVisible verwenden müssen, folgen Sie diesem Muster, um Markierungen mithilfe einer der Optionen zu filtern, die oben unter Optionen zur Anpassung von Markierungen aufgeführt sind.
Beispiel für Fahrten auf Abruf
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);
}
};