Markierungen anpassen

Plattform auswählen: Android iOS JavaScript

Das Erscheinungsbild von Markierungen anpassen, die der Karte hinzugefügt wurden. Sie können das Erscheinungsbild von Markierungen auf der Karte 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. Markierungen basierend auf Daten gestalten: Sie können eine Anpassungsfunktion angeben, um Markierungen basierend auf Daten zu gestalten. Sie können die Darstellung anhand von Daten aus der Fahrtenfreigabe oder aus externen Quellen anpassen:

    • Daten aus der Fahrtenfreigabe: Bei der Fahrtenfreigabe 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 übrig sind.

    • 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 zur Anpassung von Markierungen

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

Stil von Markierungen mit MarkerOptions ändern

Im folgenden Beispiel wird gezeigt, wie Sie die Darstellung von Fahrzeugmarkierungen mit einem MarkerOptions-Objekt konfigurieren. Nach diesem Muster können Sie den Stil jeder Markierung mit einer der unter Anpassungsoptionen für Markierungen aufgeführten Anpassungen ä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. Nach diesem Muster können Sie den Stil jeder Markierung mit den unter Optionen zur Anpassung von Markierungen aufgeführten Parametern anpassen.

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 die 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 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