Markierungen anpassen

Plattform auswählen: Android iOS JavaScript

Das Erscheinungsbild der Markierungen auf der Karte anpassen Sie können das Erscheinungsbild von Markierungen, die der Karte hinzugefügt werden, auf zwei Arten anpassen:

  1. 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 der einzelnen Markierungen angewendet und überschreiben alle Standardoptionen. Beispiele finden Sie unter Stil von Markierungen mit MarkerOptions ändern in diesem Leitfaden.

  2. Marker basierend auf Daten gestalten: Sie können eine Anpassungsfunktion angeben, um Marker basierend auf Daten zu gestalten. Sie können die Stile anhand von Daten aus der Fahrtenfreigabe oder aus externen Quellen anpassen:

    • Daten aus der Funktion „Fahrt teilen“: Bei der Funktion „Fahrt teilen“ 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 je nach aktuellem Status des Markierungselements. Beispiel: die Anzahl der Wegpunkte, die noch bis zum Ende der Fahrt des Fahrzeugs verbleiben.

    • Externe Quellen: Sie können die Daten zur Fahrtenfreigabe mit Daten aus Quellen außerhalb der Fleet Engine kombinieren und die Markierung auch anhand dieser Informationen gestalten.

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

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

Optionen zum Anpassen von Markierungen

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

Stil von Markierungen mit MarkerOptions ändern

Das folgende Beispiel zeigt, wie Sie die Darstellung von Fahrzeugmarkierungen mit einem MarkerOptions-Objekt konfigurieren. Folgen Sie diesem Muster, um den Stil einer Markierung mit einer der unter Anpassungsoptionen für Markierungen aufgeführten Anpassungen zu ändern.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Stil von Markierungen mithilfe von Anpassungsfunktionen ändern

Im folgenden Beispiel wird gezeigt, wie Sie das Design von Fahrzeugmarkierungen mithilfe von Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um den Stil einer Markierung mit einem der Parameter für die Markierungsanpassung anzupassen, die unter Optionen für die Markierungsanpassung aufgeführt sind.

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}`);
};

Klickverarbeitung für Markierungen hinzufügen

Im folgenden Beispiel wird gezeigt, wie Sie eine Klickverarbeitung für eine Fahrzeugmarkierung hinzufügen. Nach diesem Muster können Sie die Klickverarbeitung für jede Markierung hinzufügen, indem Sie einen der Anpassungsparameter für Markierungen verwenden, die unter Anpassungsoptionen für Markierungen aufgeführt sind.

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