Mit der JavaScript-Flottenverfolgungsbibliothek können Sie das Design anpassen von Markierungen, die der Karte hinzugefügt wurden. Dazu legen Sie benutzerdefinierte Markierungen fest, die die Flottenverfolgungsbibliothek anwendet, bevor Markierungen zur Karte hinzugefügt werden. und bei jeder Aktualisierung von Markierungen. Sie können das Design von Markierungen anpassen in auf folgende Weise:
Markierungen je nach Typ formatieren: Geben Sie einen
MarkerOptions-Objekt, um Markierungen desselben Typs zu gestalten. Die angegebenen Änderungen werden dann wird nach dem Erstellen jeder Markierung angewendet und überschreibt dabei alle Standardoptionen. Für Beispiele finden Sie unter Markierungen basierend auf dem Typ gestalten in diesem Leitfaden.Markierungen basierend auf Daten gestalten: Geben Sie eine Anpassungsfunktion basierend auf sowie dem Hinzufügen von Interaktivität zu Markierungen, wie z. B. Klickhandhabung, hinzugefügt. Sie können Stile basierend auf Daten aus der Flottenverfolgung oder aus externen Quellen gestalten:
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. Zum Beispiel könnte die Zahl der verbleibenden Haltestellen oder der 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 gestalten.
Klickhandhabung zu Markierungen hinzufügen: Beispiele finden Sie unter Klickverarbeitung hinzufügen:
Filtern, welche Markierungen sichtbar sind: Mit den Filterfunktionen des JavaScript-Standortanbieters können Sie festlegen, welche Markierungen angezeigt werden. Beispiel:
Anpassung von Markierungen verwenden, um ein Lieferfahrzeug für geplante Aufgaben zu verfolgen: Du kannst Markierungen anpassen, um Fahrzeuge zu verfolgen. Weitere Informationen finden Sie unter Markierungen anpassen, um ein Lieferfahrzeug zu verfolgen.
Optionen zur Anpassung von Markierungen
Die Bibliothek für die Fahrzeugverfolgung bietet die folgenden Anpassungsparameter:
Parameter zur Anpassung von On-Demand-Fahrten
Parameter für die Anpassung geplanter Aufgaben
Stile von Markierungen nach Typ anpassen
Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mit
Ein MarkerOptions-Objekt. So können Sie das Aussehen einer Markierung mithilfe der Optionen unter Optionen zur Anpassung von Markierungen anpassen.
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 formatieren
Im folgenden Beispiel wird gezeigt, wie Sie das Design einer Fahrzeugmarkierung mithilfe von Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um den Stil eines beliebigen Markierung basierend auf Daten unter Verwendung einer der Optionen in Optionen zur Anpassung von Markierungen.
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
Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung Click Handling hinzufügen. Folgen Sie diesem Muster, um Click Handling zu beliebigen Markierungen mithilfe der die oben unter Anpassungsoptionen für Markierungen aufgeführt sind.
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);
}
};