Markierungen anpassen

Das Erscheinungsbild von Markierungen, die der Karte hinzugefügt werden, lässt sich anpassen. Sie haben zwei Möglichkeiten, das Erscheinungsbild von Markierungen auf der Karte anzupassen:

1. Markierungen nach Typ gestalten: Geben Sie ein MarkerOptions-Objekt an, um Markierungen desselben Typs zu gestalten. Die von Ihnen angegebenen Änderungen werden nach dem Erstellen jeder Markierung angewendet und überschreiben alle Standardoptionen. Beispiele finden Sie in diesem Leitfaden unter Stil von Markierungen mit MarkerOptions ändern.

2. Marker basierend auf Daten gestalten: Geben Sie eine Anpassungsfunktion an, um Marker basierend auf Daten zu gestalten. Sie können die Darstellung auf Grundlage von Daten aus der Routenfreigabe oder aus externen Quellen anpassen:

   • Daten aus der Funktion zum Teilen von Fahrten: Bei der Funktion zum Teilen von Fahrten werden Markierungsdaten an die Anpassungsfunktion übergeben, einschließlich des Typs des Objekts, das die Markierung darstellt: Fahrzeug, Startpunkt, Wegpunkt oder Ziel. Die Formatierung der Markierung ändert sich dann je nach aktuellem Status des Markierungselements. Beispiel: die Anzahl der verbleibenden Wegpunkte, bis das Fahrzeug die Fahrt beendet.

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

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

3. Klickbearbeitung für Markierungen hinzufügen: Beispiele finden Sie unter Klickbearbeitung hinzufügen.

Optionen zum Anpassen von Markierungen

Bei beiden 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 Styling von Fahrzeugmarkierungen mit einem MarkerOptions-Objekt konfiguriert wird. Folgen Sie diesem Muster, um das Design einer beliebigen Markierung mit einer der in Optionen zum Anpassen von Markierungen aufgeführten Markierungsanpassungen anzupassen.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Markierungen mit Anpassungsfunktionen gestalten

Im folgenden Beispiel wird gezeigt, wie Sie das Design von Fahrzeugmarkierungen mit Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um das Design einer beliebigen Markierung mit einem der in Optionen zum Anpassen von 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}`);
};

Klickbearbeitung für Markierungen hinzufügen

Im folgenden Beispiel wird gezeigt, wie einem Fahrzeugmarker die Klickbehandlung hinzugefügt wird. Folgen Sie diesem Muster, um einer Markierung mit einem der in Optionen zur Anpassung von Markierungen aufgeführten Anpassungsparameter eine Klickbehandlung hinzuzufügen.

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

• Routen-Polylinien anpassen