Markierungen anpassen

In diesem Dokument wird beschrieben, wie Sie Fahrzeug- und Standortmarkierungen auf der Karte anpassen, die Sie für Ihre webbasierte App zur Sendungsverfolgung für Verbraucher verwenden.

Mit dem Consumer SDK für JavaScript können Sie das Aussehen und Verhalten von zwei Arten von Markierungen anpassen, die der Karte hinzugefügt werden:

Dazu haben Sie zwei Möglichkeiten:

  • Einfachste Methode: Geben Sie ein MarkerOptions-Objekt an, das auf alle Markierungen desselben Typs angewendet werden soll. Das Consumer SDK wendet das Styling dann in zwei Situationen an: bevor die Markierungen der Karte hinzugefügt werden und wenn sich die für die Markierungen verwendeten Daten geändert haben.
  • Erweiterte Methode: Geben Sie eine Anpassungsfunktion an. Mit Anpassungsfunktionen können Sie die Markierungen anhand von Daten gestalten und Markierungen interaktive Funktionen hinzufügen, z. B. die Verarbeitung von Klicks. Das Consumer SDK übergibt Daten an die Anpassungsfunktion, die den Typ des Objekts angeben, das die Markierung darstellt: Fahrzeug oder Zielort. So kann das Styling der Markierung je nach aktuellem Status des Markierungselements geändert werden, z. B. anhand der Anzahl der geplanten Stopps bis zum Zielort. Sie können sogar Daten aus Quellen außerhalb von Fleet Engine verwenden und die Markierung anhand dieser Informationen gestalten.

Einfaches Beispiel: MarkerOptions verwenden

Im folgenden Beispiel wird gezeigt, wie Sie das Styling einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt konfigurieren. In diesem Beispiel wird die Deckkraft der Markierung auf 50 % festgelegt.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Erweitertes Beispiel: Anpassungsfunktion verwenden

Im folgenden Beispiel wird gezeigt, wie Sie das Styling einer Fahrzeugmarkierung so konfigurieren, dass die Anzahl der verbleibenden Stopps für das Fahrzeug angezeigt wird, bevor der Stopp für die geplante Aufgabe erreicht wird.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Markierungen Klick-Handling hinzufügen

Sie können jeder Markierung ein Klick-Handling hinzufügen, wie im folgenden Beispiel für eine Fahrzeugmarkierung.

JavaScript

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

TypeScript

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

Zusätzliche Informationen für Markierungen anzeigen

Mit einem InfoWindow-Objekt können Sie zusätzliche Informationen zu einer Fahrzeug- oder Standortmarkierung anzeigen. Im folgenden Beispiel wird ein InfoWindow-Objekt erstellt und an eine Fahrzeugmarkierung angehängt:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Nächste Schritte