Markierungen anpassen

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

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 basierend auf Daten stilisieren: Hier können Sie eine Anpassungsfunktion angeben, um Markierungen basierend auf Daten zu stilisieren. Sie können den Stil basierend auf Daten aus dem Teilen von Kaufprozessen oder aus externen Quellen festlegen:

   • 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. Das Markierungs-Styling ä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 von 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 Markierungsanpassung

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. Folgen Sie diesem Muster, um das Design einer Markierung mithilfe der unter Optionen zur Markierungsanpassung aufgeführten Anpassungen zu ändern.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Stil von Markierungen mit Anpassungsfunktionen ändern

Das folgende Beispiel zeigt, wie Sie das Design von Fahrzeugmarkierungen mithilfe von Anpassungsfunktionen konfigurieren. So können Sie das Design einer Markierung mithilfe der unter Optionen zur Anpassung von Markierungen aufgeführten Parameter anpassen.

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