Markierungen anpassen

Passen Sie das Design der Markierungen an, die der Karte hinzugefügt wurden. 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. Der Stil der Markierung ändert sich dann entsprechend dem aktuellen 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 Stil von Markierungen mithilfe von Anpassungsfunktionen ändern.

3. Klickhandhabung zu Markierungen hinzufügen: Beispiele finden Sie unter Klickhandhabung 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

Im folgenden Beispiel wird gezeigt, wie das Gestalten 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'
};

Den 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 den Stil einer Markierung mithilfe der unter Anpassungsoptionen für Markierungen 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}`);
};

Click Handling zu Markierungen

Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung Click Handling hinzufügen. 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