Markierungen anpassen

Mit der JavaScript-Flottenverfolgungsbibliothek können Sie das Design anpassen von Markierungen, die der Karte hinzugefügt wurden. Dazu legen Sie benutzerdefinierte Markierungen fest, die die Flottenverfolgungsbibliothek anwendet, bevor Markierungen zur Karte hinzugefügt werden. und bei jeder Aktualisierung von Markierungen. Sie können das Design von Markierungen anpassen in auf folgende Weise:

  1. Markierungen je nach Typ formatieren: Geben Sie einen MarkerOptions -Objekt, um Markierungen desselben Typs zu gestalten. Die angegebenen Änderungen werden dann wird nach dem Erstellen jeder Markierung angewendet und überschreibt dabei alle Standardoptionen. Für Beispiele finden Sie unter Markierungen basierend auf dem Typ gestalten in dieses Leitfadens.

  2. Markierungen basierend auf Daten gestalten: Geben Sie eine Anpassungsfunktion basierend auf sowie dem Hinzufügen von Interaktivität zu Markierungen, wie z. B. Klickhandhabung, hinzugefügt. Sie können Stile basierend auf Daten aus der Flottenverfolgung oder aus externen Quellen gestalten:

    • Daten aus der Flottenverfolgung: Die Flottenverfolgung gibt Daten an die Anpassungsfunktion, einschließlich des Objekttyps der Markierung steht für Fahrzeug, Haltestelle oder Aufgabe. Daraufhin ändert sich der Stil der Markierung. basierend auf dem aktuellen Status des Markierungselements. Zum Beispiel könnte die Zahl der verbleibenden Haltestellen oder der Art der Aufgabe.

    • Externe Quellen: Sie können Flottenverfolgungsdaten mit Daten von Quellen außerhalb von Fleet Engine an und versehen Sie die Markierung damit Informationen erhalten.

    Beispiele finden Sie unter Markierungen basierend auf Daten gestalten.

  3. Klickhandhabung zu Markierungen hinzufügen: Beispiele finden Sie unter Klickverarbeitung 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 Flottenverfolgung bietet die folgenden Anpassungsparameter:

Parameter zur Anpassung von On-Demand-Fahrten

Parameter zur Anpassung geplanter Aufgaben

Stile von Markierungen nach Typ anpassen

Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mit Ein MarkerOptions-Objekt. Folgen Sie diesem Muster, um den Stil eines beliebigen mit einer der Optionen in Anpassungsoptionen für Markierungen

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. 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 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 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 zu filtern Verwenden Sie dazu eine der Optionen, 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