Markierungen anpassen

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

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

2. Markierungen anhand von Daten gestalten: Geben Sie eine auf Daten basierende Anpassungsfunktion an und fügen Sie Markierungen Interaktivität hinzu, z. B. die Verarbeitung von Klicks. Sie können die Gestaltung auf Daten aus der Flottenverfolgung oder aus externen Quellen stützen:

   • Daten aus der Flottenverfolgung: Die Flottenverfolgung übergibt Daten an die Anpassungsfunktion, einschließlich des Typs des Objekts, das die Markierung darstellt: Fahrzeug, Haltestelle oder Aufgabe. Die Markierungsgestaltung ändert sich dann basierend auf dem aktuellen Status des Markierungselements. Beispiele sind die Anzahl der verbleibenden Haltestellen oder der Aufgabentyp.

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

   Beispiele finden Sie unter Markierungen anhand von Daten gestalten.

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

4. Filtern, welche Markierungen sichtbar sind: Filtern Sie, welche Markierungen mit den Filterfunktionen des JavaScript-Standortanbieters angezeigt werden. Beispiele:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter

5. Markierungsanpassung verwenden, um das Lieferfahrzeug für eine geplante Aufgabe zu verfolgen: Sie können Markierungen anpassen, um Fahrzeuge zu verfolgen. Weitere Informationen finden Sie unter Markierungsanpassung verwenden, um ein Lieferfahrzeug zu verfolgen.

Optionen für die Markierungsanpassung

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

Anpassungsparameter für On-Demand-Fahrten

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Anpassungsparameter für geplante Aufgaben

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Markierungen nach Typ gestalten

Das folgende Beispiel zeigt, wie Sie die Gestaltung einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt konfigurieren. Folgen Sie diesem Muster, um die Gestaltung einer Markierung mit einer der unter Optionen für die Markierungsanpassungaufgeführten Optionen anzupassen.

Beispiel für On-Demand-Fahrten

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Beispiel für geplante Aufgaben

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Markierungen anhand von Daten gestalten

Das folgende Beispiel zeigt, wie Sie die Gestaltung einer Fahrzeugmarkierung mit Anpassungsfunktionen konfigurieren. Folgen Sie diesem Muster, um die Gestaltung einer Markierung anhand von Daten mit einer der oben unter Optionen für die Markierungsanpassung aufgeführten Optionen anzupassen.

Beispiel für On-Demand-Fahrten

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

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

Beispiel für geplante Aufgaben

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

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

Klickverarbeitung zu Markierungen hinzufügen

Das folgende Beispiel zeigt, wie Sie einer Fahrzeugmarkierung eine Klickverarbeitung hinzufügen. Folgen Sie diesem Muster, um einer Markierung mit einer der Optionen, die unter Optionen für die Markierungsanpassung aufgeführt sind, eine Klickverarbeitung hinzuzufügen.

Beispiel für On-Demand-Fahrten

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

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

Beispiel für geplante Aufgaben

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

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 oben unter Optionen für die Markierungsanpassung aufgeführten Optionen zu filtern.

Beispiel für On-Demand-Fahrten

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

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

Beispiel für geplante Aufgaben

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

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

Nächste Schritte

• Karte gestalten
• Polylinien anpassen