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 je nach Typ formatieren: Geben Sie einen MarkerOptions -Objekt, um Markierungen desselben Typs zu gestalten. Die von Ihnen angegebenen Änderungen werden dann nach dem Erstellen jeder Markierung angewendet und alle Standardoptionen überschrieben. Beispiele finden Sie unter Den Stil von Markierungen mit MarkerOptions ändern in dieser .

2. Markierungen basierend auf Daten gestalten: Geben Sie eine Anpassungsfunktion für basierend auf Daten formatiert werden. Sie können Stile basierend auf Daten aus der Journey oder von externen Quellen stammen:

   • Daten aus der Reisefreigabe: Beim Teilen von Reisen werden Markierungsdaten an die -Anpassungsfunktion, einschließlich des Objekttyps, den die Markierung darstellt: Fahrzeug, Startort, Wegpunkt oder Ziel. Daraufhin ändert sich der Stil der Markierung. basierend auf dem aktuellen Status des Markierungselements. Zum Beispiel könnte die Zahl der Wegpunkte verbleiben, bis das Fahrzeug die Fahrt beendet hat.

   • Externe Quellen: Sie können die Daten zum Teilen der Reise mit Daten aus Quellen außerhalb von Fleet Engine abrufen und die Markierung entsprechend gestalten Informationen erhalten.

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

3. Click Handling zu Markierungen hinzufügen: Beispiele: Weitere Informationen

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

Den Stil von Markierungen mit MarkerOptions ändern

Das folgende Beispiel zeigt, wie Sie das Gestalten von Fahrzeugmarkierungen mit Ein MarkerOptions-Objekt. Folgen Sie diesem Muster, um den Stil eines beliebigen Markierung mithilfe einer der Markierungsanpassungen, die in Anpassungsoptionen für Markierungen

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. Folgen Sie diesem Muster, um den Stil eines beliebigen Markierung mithilfe eines der Parameter zur Anpassung von Markierungen, die in Anpassungsoptionen für Markierungen

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

Im folgenden Beispiel wird gezeigt, wie einer Fahrzeugmarkierung eine Klickbehandlung hinzugefügt wird. Folgen Sie diesem Muster, um Click Handling zu allen Markierungen hinzuzufügen, die eine der Markierungen verwenden. finden Sie unter Anpassungsoptionen für Markierungen.

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