Passen Sie das Design der Markierungen an, die der Karte hinzugefügt wurden. Sie haben zwei Möglichkeiten, das Erscheinungsbild von Markierungen anzupassen, die der Karte hinzugefügt wurden:
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 Styling von Markierungen mitMarkerOptions
ändern.Markierungen basierend auf Daten stilisieren: Hier können Sie eine Anpassungsfunktion angeben, um Markierungen basierend auf Daten zu stilisieren. Sie können den Stil basierend auf Daten aus dem Teilen von Kaufprozessen oder aus externen Quellen festlegen:
Daten aus der Fahrtfreigabe: Bei der Fahrtfreigabe werden Markierungsdaten an die Anpassungsfunktion übergeben, einschließlich des Objekttyps, den die Markierung darstellt: Fahrzeug, Startpunkt, Wegpunkt oder Ziel. Der Stil der Markierung ändert sich dann entsprechend dem aktuellen Status des Markierungselements. Beispielsweise 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 formatieren.
Beispiele finden Sie in diesem Leitfaden unter Stil von Markierungen mithilfe von Anpassungsfunktionen ändern.
Klickhandhabung zu Markierungen hinzufügen: Beispiele finden Sie unter Klickhandhabung hinzufügen.
Optionen zur Anpassung von Markierungen
Für beide Optionen werden die folgenden Anpassungsparameter in der Google Maps JavaScript API unter FleetEngineTripLocationProviderOptions
verwendet:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
Stil von Markierungen mit MarkerOptions
ändern
Im folgenden Beispiel wird gezeigt, wie das Gestalten von Fahrzeugmarkierungen mit einem MarkerOptions
-Objekt konfiguriert wird. Folgen Sie diesem Muster, um das Design einer Markierung mithilfe der unter Optionen zur Markierungsanpassung aufgeführten Anpassungen zu ändern.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Den Stil von Markierungen mithilfe von Anpassungsfunktionen ändern
Das folgende Beispiel zeigt, wie Sie das Design von Fahrzeugmarkierungen mithilfe von Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um den Stil einer Markierung mithilfe der unter Anpassungsoptionen für 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}`);
};
Click Handling zu Markierungen
Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung Click Handling hinzufügen. So fügen Sie einer Markierung die Klickbehandlung mithilfe eines der in Optionen zur Markierungsanpassung aufgeführten Parameter hinzu.
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.
});
}
};