Sie können das Erscheinungsbild von Markierungen anpassen, die der Karte hinzugefügt wurden. Sie haben zwei Möglichkeiten, das Erscheinungsbild von Markierungen auf der Karte 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 Stil von Markierungen mitMarkerOptionsändern.Marker basierend auf Daten gestalten: Geben Sie eine Anpassungsfunktion an, um Marker basierend auf Daten zu gestalten. Sie können das Styling auf Grundlage von Daten aus der Routenfreigabe oder aus externen Quellen vornehmen:
Daten aus der Funktion zum Teilen von Fahrten: Bei der Funktion zum Teilen von Fahrten werden Markierungsdaten an die Anpassungsfunktion übergeben, einschließlich des Typs des Objekts, das die Markierung darstellt: Fahrzeug, Startpunkt, Wegpunkt oder Ziel. Die Markierungsformatierung ändert sich dann je nach aktuellem Status des Markierungselements. Beispiel: Die Anzahl der verbleibenden Wegpunkte, bis das Fahrzeug die Fahrt beendet.
Externe Quellen: Sie können die Daten zur Fahrtfreigabe mit Daten aus Quellen außerhalb von Fleet Engine kombinieren und die Markierung auch anhand dieser Informationen gestalten.
Beispiele finden Sie in diesem Leitfaden unter Stil von Markierungen mit Anpassungsfunktionen ändern.
Klickbearbeitung für Markierungen hinzufügen: Beispiele finden Sie unter Klickbearbeitung hinzufügen.
Optionen zum Anpassen von Markierungen
Bei beiden Optionen werden die folgenden Anpassungsparameter in der Google Maps JavaScript API unter FleetEngineTripLocationProviderOptions verwendet:
vehicleMarkerCustomizationoriginMarkerCustomizationwaypointMarkerCustomizationdestinationMarkerCustomization
Stil von Markierungen mit MarkerOptions ändern
Das folgende Beispiel zeigt, wie Sie das Styling von Fahrzeugmarkierungen mit einem MarkerOptions-Objekt konfigurieren. Folgen Sie diesem Muster, um das Design einer beliebigen Markierung mit einer der in Optionen zum Anpassen von Markierungen aufgeführten Markierungsanpassungen anzupassen.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Stil von Markierungen mit Anpassungsfunktionen ändern
Das folgende Beispiel zeigt, wie Sie das Styling von Fahrzeugmarkierungen mit Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um das Design einer beliebigen Markierung mit einem der in Optionen zum Anpassen von Markierungen aufgeführten Parameter anzupassen.
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
Markierungen mit Klickbearbeitung versehen
Das folgende Beispiel zeigt, wie einer Fahrzeugmarkierung die Klickbehandlung hinzugefügt wird. Folgen Sie diesem Muster, um einer Markierung mit einem der in Optionen zur Anpassung von Markierungen aufgeführten Parameter zur Anpassung von Markierungen eine Klickbehandlung hinzuzufügen.
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};