Markierungen anpassen

Passen Sie das Design der Markierungen an, die der Karte hinzugefügt wurden. Erscheinungsbild anpassen Markierungen auf zwei Arten zur Karte hinzugefügt:

1. Markierungen je nach Typ formatieren: Geben Sie einen MarkerOptions -Objekt, um Markierungen desselben Typs zu gestalten. Die angegebenen Änderungen sind wird nach dem Erstellen jeder Markierung angewendet und überschreibt dabei alle Standardoptionen. 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 basierend darauf gestalten Informationen erhalten.

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

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

Optionen zur Anpassung von Markierungen

Bei beiden Optionen werden die folgenden Anpassungsparameter in der Google Maps JavaScript API unter FleetEngineTripLocationProviderOptions:

• 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'
};

Den Stil von Markierungen mithilfe von Anpassungsfunktionen ändern

Das folgende Beispiel zeigt, wie die Gestaltung von Fahrzeugmarkierungen mithilfe von Anpassungsfunktionen. 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

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