Markierungen anpassen

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

Mit dem JavaScript Consumer SDK können Sie das Erscheinungsbild von Markierungstypen, die der Karte hinzugefügt wurden:

Dazu haben Sie zwei Möglichkeiten:

  • Am einfachsten: Geben Sie ein MarkerOptions-Objekt an, das auf alle Markierungen angewendet werden soll. desselben Typs. Das Consumer SDK wendet den Stil dann in zwei Situationen: bevor die Markierungen zur Karte hinzugefügt werden und wann die Daten für die Markierungen geändert.
  • Erweitert: Geben Sie eine Anpassungsfunktion an. Anpassungsfunktionen ermöglichen das Gestalten von Markierungen auf der Grundlage von Daten sowie das Hinzufügen von Interaktivität von Markierungen, wie z. B. Klickhandhabung. Konkret gilt: Der Verbraucher Das SDK übergibt der Anpassungsfunktion Daten über den Objekttyp, Markierung steht für: Fahrzeug oder Ziel. Dadurch wird das Gestalten von Markierungen zum Ändern basierend auf dem aktuellen Status des Markierungselements. für z. B. die Anzahl der geplanten Haltestellen bis zum Ziel. Ich Sie können sogar Daten aus Quellen außerhalb von Fleet Engine zusammenführen und den Stil basierend auf diesen Informationen.

Einfaches Beispiel: MarkerOptions verwenden

Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung mit einem MarkerOptions-Objekt. In diesem Beispiel wird die Deckkraft der Markierung auf 50 % festgelegt.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Beispiel für Fortgeschrittene: Anpassungsfunktion verwenden

Das folgende Beispiel zeigt, wie Sie den Stil einer Fahrzeugmarkierung so konfigurieren, dass die verbleibende Anzahl der Haltestellen für das Fahrzeug anzuzeigen, bevor die Haltestelle für der geplanten Aufgabe.

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}`);
  };

Click Handling zu Markierungen

Sie können jeder Markierung ein Click Handling hinzufügen, wie im folgenden Beispiel gezeigt. 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 zu Markierungen anzeigen

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

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