Passen Sie das Design der Markierungen an, die der Karte hinzugefügt wurden. Erscheinungsbild anpassen Markierungen auf zwei Arten zur Karte hinzugefügt:
Markierungen je nach Typ formatieren: Geben Sie einen
MarkerOptions
-Objekt, um Markierungen desselben Typs zu gestalten. Die angegebenen Änderungen sind wird nach dem Erstellen jeder Markierung angewendet und überschreibt dabei alle Standardoptionen. Beispiele finden Sie unter Den Stil von Markierungen mitMarkerOptions
ändern in dieser .Markierungen basierend auf Daten gestalten: Geben Sie eine Anpassungsfunktion für basierend auf Daten formatiert werden. Sie können Stile basierend auf Daten aus der Journey oder von externen Quellen stammen:
Daten aus der Reisefreigabe: Beim Teilen von Reisen werden Markierungsdaten an die -Anpassungsfunktion, einschließlich des Objekttyps, den die Markierung darstellt: Fahrzeug, Startort, Wegpunkt oder Ziel. Daraufhin ändert sich der Stil der Markierung. basierend auf dem aktuellen Status des Markierungselements. Zum Beispiel könnte die Zahl der Wegpunkte verbleiben, bis das Fahrzeug die Fahrt beendet hat.
Externe Quellen: Sie können die Daten zum Teilen der Reise mit Daten aus Quellen außerhalb von Fleet Engine abrufen und die Markierung basierend darauf gestalten Informationen erhalten.
Beispiele finden Sie unter Den Stil von Markierungen mithilfe von Anpassungsfunktionen ändern in diesem Leitfaden.
Click Handling zu Markierungen hinzufügen: Beispiele: Weitere Informationen
Optionen zur Anpassung von Markierungen
Bei beiden Optionen werden die folgenden Anpassungsparameter in der Google
Maps JavaScript API unter
FleetEngineTripLocationProviderOptions
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
Den Stil von Markierungen mit MarkerOptions
ändern
Das folgende Beispiel zeigt, wie Sie das Gestalten von Fahrzeugmarkierungen mit
Ein MarkerOptions
-Objekt. Folgen Sie diesem Muster, um den Stil eines beliebigen
Markierung mithilfe einer der Markierungsanpassungen, die in
Anpassungsoptionen für Markierungen
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Den Stil von Markierungen mithilfe von Anpassungsfunktionen ändern
Das folgende Beispiel zeigt, wie die Gestaltung von Fahrzeugmarkierungen mithilfe von Anpassungsfunktionen. Folgen Sie diesem Muster, um den Stil eines beliebigen Markierung mithilfe eines der Parameter zur Anpassung von Markierungen, die in Anpassungsoptionen für Markierungen
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. Folgen Sie diesem Muster, um Click Handling zu allen Markierungen hinzuzufügen, die eine der Markierungen verwenden. finden Sie unter Anpassungsoptionen für Markierungen.
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.
});
}
};