Markierungen anpassen

Mit der JavaScript-Flottenverfolgungsbibliothek können Sie das Design von Markierungen anpassen, die der Karte hinzugefügt wurden. Dazu geben Sie Markierungsanpassungen an, die dann von der Bibliothek für die Flottenverfolgung angewendet werden, bevor Markierungen auf der Karte hinzugefügt werden, und bei jeder Markierungsaktualisierung. So können Sie das Erscheinungsbild von Markierungen anpassen:

  1. Markierungen basierend auf dem Typ gestalten: Geben Sie ein MarkerOptions-Objekt an, um Stile von 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 in diesem Leitfaden unter Markierungen basierend auf dem Typ gestalten.

  2. Markierungen basierend auf Daten gestalten: Sie können eine Anpassungsfunktion basierend auf Daten festlegen und Markierungen interaktiv gestalten, z. B. bei der Klickbehandlung. Sie können die Darstellung anhand von Daten aus der Flottenverfolgung oder aus externen Quellen anpassen:

    • Daten aus der Flottenverfolgung: Beim Flotten-Tracking werden Daten an die Anpassungsfunktion gesendet, einschließlich des Objekttyps, den die Markierung repräsentiert: Fahrzeug, Haltestelle oder Aufgabe. Das Markierungs-Styling ändert sich dann je nach aktuellem Status des Markierungselements. Beispielsweise die Anzahl der verbleibenden Haltestellen oder die Art der Aufgabe.

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

    Beispiele finden Sie unter Markierungen basierend auf Daten stilisieren.

  3. Klickhandhabung zu Markierungen hinzufügen: Beispiele finden Sie unter Klickhandhabung hinzufügen.

  4. Sichtbare Markierungen filtern: Mit den Filterfunktionen des JavaScript-Standortanbieters können Sie filtern, welche Markierungen angezeigt werden. Beispiel:

  5. Anpassung von Markierungen verwenden, um ein Lieferfahrzeug für geplante Aufgaben zu verfolgen: Sie können Markierungen anpassen, um Fahrzeuge zu verfolgen. Weitere Informationen findest du unter Markierungsanpassung verwenden, um ein Lieferfahrzeug zu verfolgen.

Optionen zur Markierungsanpassung

Die Bibliothek für die Fahrzeugverfolgung bietet die folgenden Anpassungsparameter:

Parameter zur Anpassung von On-Demand-Fahrten

Parameter zur Anpassung geplanter Aufgaben

Markierungen nach Typ stylen

Im folgenden Beispiel wird gezeigt, wie Sie den Stil einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt konfigurieren. Folgen Sie diesem Muster, um den Stil einer Markierung mithilfe der unter Anpassungsoptionen für Markierungen aufgeführten Optionen anzupassen.

Beispiel für On-Demand-Fahrten

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Beispiel für geplante Aufgaben

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Markierungen basierend auf Daten gestalten

Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mithilfe von Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um den Stil einer Markierung anhand der Daten mithilfe der oben unter Anpassungsoptionen für Markierungen aufgeführten Optionen anzupassen.

Beispiel für On-Demand-Fahrten

JavaScript

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Beispiel für geplante Aufgaben

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Click Handling zu Markierungen

Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung Click Handling hinzufügen. Folgen Sie diesem Muster, um einer Markierung mithilfe der oben unter Anpassungsoptionen für Markierungen aufgeführten Optionen Klick-Handhabung hinzuzufügen.

Beispiel für On-Demand-Fahrten

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

Beispiel für geplante Aufgaben

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

Filtern, welche Markierungen sichtbar sind

Wenn Sie setVisible verwenden müssen, folgen Sie diesem Muster, um Markierungen mit einer der Optionen zu filtern, die oben unter Anpassungsoptionen für Markierungen aufgeführt sind.

Beispiel für On-Demand-Fahrten

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Beispiel für geplante Aufgaben

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Nächste Schritte