Markierungen anpassen

Mit der JavaScript-Bibliothek für die Fahrzeugverfolgung können Sie das Erscheinungsbild der Markierungen anpassen, die der Karte hinzugefügt werden. Dazu geben Sie Markierungsanpassungen an, die dann von der Bibliothek für die Fahrzeugverfolgung 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 nach Typ formatieren: Geben Sie ein MarkerOptions-Objekt an, um Markierungen desselben Typs zu formatieren. Die angegebenen Änderungen werden dann wird nach dem Erstellen jeder Markierung angewendet und überschreibt dabei alle Standardoptionen. Beispiele finden Sie in diesem Leitfaden unter Stilmarkierungen basierend auf dem Typ.

  2. Markierungen anhand von Daten formatieren: Sie können eine benutzerdefinierte Funktion auf Grundlage von Daten angeben und Markierungen interaktiv gestalten, z. B. durch Klickbehandlung. Sie können die Darstellung anhand von Daten aus der Flottenverfolgung oder aus externen Quellen anpassen:

    • Daten aus dem Flotten-Tracking: Das Flotten-Tracking gibt Daten an die Anpassungsfunktion weiter, einschließlich der Art des Objekts, das die Markierung darstellt: Fahrzeug, Haltestelle oder Aufgabe. Das Markierungs-Styling ändert sich dann je nach aktuellem Status des Markierungselements. Zum Beispiel könnte die Zahl der verbleibenden Haltestellen oder der 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 gestalten.

  3. Markierungen eine Klickbehandlung hinzufügen: Beispiele finden Sie unter Klickbehandlung hinzufügen.

  4. Sichtbare Markierungen filtern: Sie können filtern, welche Markierungen angezeigt werden. mit den am JavaScript-Speicherort verfügbaren Filterfunktionen Dienstanbieter. Beispiel:

  5. Anpassung von Markierungen verwenden, um ein Lieferfahrzeug für geplante Aufgaben zu verfolgen: Du kannst Markierungen anpassen, um Fahrzeuge zu verfolgen. Weitere Informationen finden Sie unter Verwenden von Anpassung von Markierungen, um ein Lieferfahrzeug zu verfolgen.

Optionen zur Anpassung von Markierungen

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

Parameter zur Anpassung von On-Demand-Fahrten

Parameter zur Anpassung geplanter Aufgaben

Stile von Markierungen nach Typ anpassen

Im folgenden Beispiel wird gezeigt, wie das Design einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt konfiguriert wird. So können Sie das Aussehen einer Markierung mithilfe der Optionen unter Optionen zur Anpassung von Markierungen anpassen.

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

Im folgenden Beispiel wird gezeigt, wie Sie das Design einer Fahrzeugmarkierung mithilfe von Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um den Stil eines beliebigen Markierung basierend auf Daten unter Verwendung einer der Optionen in Optionen zur Anpassung von Markierungen.

Beispiel für Fahrten auf Abruf

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 Click Handling zu beliebigen Markierungen mithilfe der die oben unter Anpassungsoptionen für Markierungen aufgeführt sind.

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 mithilfe einer der Optionen zu filtern, die oben unter Optionen zur Anpassung von 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