Markierungen anpassen

Plattform auswählen: Android iOS JavaScript

Das Erscheinungsbild von Markierungen, die der Karte hinzugefügt werden, lässt sich anpassen. Sie haben zwei Möglichkeiten, das Erscheinungsbild von Markierungen auf der Karte anzupassen:

1. Markierungen nach Typ gestalten: Geben Sie ein MarkerOptions-Objekt an, um Markierungen desselben Typs zu gestalten. Die von Ihnen angegebenen Änderungen werden nach dem Erstellen jeder Markierung angewendet und überschreiben alle Standardoptionen. Beispiele finden Sie in diesem Leitfaden unter Darstellung von Markierungen mit MarkerOptions ändern.

2. Marker basierend auf Daten gestalten: Geben Sie eine Anpassungsfunktion an, um Marker basierend auf Daten zu gestalten. Sie können die Darstellung auf Grundlage von Daten aus der Routenfreigabe oder aus externen Quellen anpassen:

   • 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 Formatierung der Markierung ä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 Routenfreigabe 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 Markierungen mit Anpassungsfunktionen gestalten.

3. 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:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Stil von Markierungen mit MarkerOptions ändern

Im folgenden Beispiel wird gezeigt, wie Sie das Design von Fahrzeugmarkierungen mit einem MarkerOptions-Objekt konfigurieren. Folgen Sie diesem Muster, um das Styling 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

Im folgenden Beispiel wird gezeigt, wie Sie das Design 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}`);
};

Klickbearbeitung für Markierungen hinzufügen

Das folgende Beispiel zeigt, wie man eine Klickbehandlung für eine Fahrzeugmarkierung hinzufügt. Folgen Sie diesem Muster, um einer beliebigen Markierung mit einem der in Optionen für die Anpassung von Markierungen aufgeführten Anpassungsparameter für Markierungen die 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

• Routen-Polylinien anpassen