Markierungen anpassen

Plattform auswählen: Android iOS JavaScript

Sie können das Erscheinungsbild von Markierungen anpassen, die der Karte hinzugefügt wurden. Dazu haben Sie zwei Möglichkeiten:

1. 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 mit MarkerOptions ändern.

2. Markierungen nach Daten gestalten: Geben Sie eine Anpassungsfunktion an, um Markierungen basierend auf Daten zu gestalten. Sie können die Gestaltung auf Daten aus der Fahrtfreigabe oder aus externen Quellen stützen:

   • Daten aus der Fahrtfreigabe: Bei der Fahrtfreigabe werden Markierungsdaten an die Anpassungsfunktion übergeben, einschließlich des Typs des Objekts, das die Markierung darstellt: Fahrzeug, Startpunkt, Wegpunkt oder Ziel. Die Markierungsgestaltung ändert sich dann basierend auf dem aktuellen Status des Markierungselements. Beispiel: Anzahl der verbleibenden Wegpunkte, bis das Fahrzeug die Fahrt beendet.

   • Externe Quellen: Sie können die Daten aus der Fahrtfreigabe mit Daten aus Quellen außerhalb von Fleet Engine kombinieren und die Markierung auch basierend auf diesen Informationen gestalten.

   Beispiele finden Sie in diesem Leitfaden unter Stil von Markierungen mit Anpassungsfunktionen ändern.

3. Klickbehandlung zu Markierungen hinzufügen: Beispiele finden Sie unter Klickbehandlung hinzufügen.

Optionen zur Markierungsanpassung

Bei beiden Optionen werden die folgenden Anpassungsparameter in der Google Maps JavaScript API unter FleetEngineTripLocationProviderOptions verwendet:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Stil von Markierungen mit MarkerOptions ändern

Das folgende Beispiel zeigt, wie Sie den Stil von Fahrzeugmarkierungen mit einem MarkerOptions-Objekt konfigurieren. Folgen Sie diesem Muster, um den Stil einer beliebigen Markierung mit einer der in Optionen zur Markierungsanpassungaufgefü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 den Stil einer beliebigen Markierung mit einem der in Optionen zur Markierungsanpassungaufgeführten Markierungsanpassungsparameter 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}`);
};

Klickbehandlung zu Markierungen hinzufügen

Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung eine Klickbehandlung hinzufügen. Folgen Sie diesem Muster, um einer beliebigen Markierung mit einem der in Optionen zur Markierungsanpassung aufgeführten Markierungs anpassungsparameter 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.
      });
    }
  };

Nächste Schritte

• Routenpolylinien anpassen