Markierungen anpassen

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

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 jeder Markierung angewendet und alle Standardoptionen überschrieben. Beispiele finden Sie in diesem Leitfaden unter Styling von Markierungen mit MarkerOptions ändern.

2. Markierungen anhand von Daten formatieren: Geben Sie eine Anpassungsfunktion an, um Markierungen anhand von Daten zu formatieren. Sie können die Darstellung anhand von Daten aus dem Teilen von Kaufprozessen oder aus externen Quellen anpassen:

   • Daten aus der Fahrtfreigabe: Bei der Fahrtfreigabe werden Markierungsdaten an die Anpassungsfunktion übergeben, einschließlich des Objekttyps, den die Markierung darstellt: Fahrzeug, Startpunkt, Wegpunkt oder Ziel. Der Markierungsstil ändert sich dann je nach aktuellem Status des Markierungselements. Beispielsweise die Anzahl der verbleibenden Wegpunkte, bis das Fahrzeug die Fahrt beendet.

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

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

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

Optionen zur Anpassung von Markierungen

Für beide 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 das Design von Fahrzeugmarkierungen mit einem MarkerOptions-Objekt konfiguriert wird. So können Sie das Design einer Markierung mithilfe der unter Optionen zur Anpassung von Markierungen aufgeführten Optionen anpassen.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Stil von Markierungen mithilfe von Anpassungsfunktionen ändern

Das folgende Beispiel zeigt, wie Sie das Design von Fahrzeugmarkierungen mithilfe von Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um das Design einer Markierung mithilfe der unter Optionen zur Markierungsanpassung aufgeführten Parameter anzupassen.

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

Markierungen eine Klickbehandlung hinzufügen

Im folgenden Beispiel wird gezeigt, wie einer Fahrzeugmarkierung eine Klickbehandlung hinzugefügt wird. So fügen Sie einer Markierung die Klickbehandlung mithilfe eines der in Optionen zur Markierungsanpassung aufgeführten Anpassungsparameter hinzu.

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Nächste Schritte

• Polylinien für Routen anpassen