Flotte ansehen

In diesem Abschnitt wird beschrieben, wie Sie die JavaScript-Bibliothek für das Flottentracking verwenden, um eine Flotte aufzurufen. Bei diesen Verfahren wird davon ausgegangen, dass Sie die Bibliothek für das Flottentracking eingerichtet und eine Karte geladen haben. Weitere Informationen finden Sie unter JavaScript-Bibliothek für die Flottenverfolgung einrichten.

In diesem Dokument wird Folgendes behandelt, was Sie beim Aufrufen einer Flotte tun können:

  1. Flotte verfolgen
  2. Auf Ereignisse warten und Fehler beheben
  3. Tracking beenden.
  4. Einzelnes Fahrzeug verfolgen, während Sie eine Flotte ansehen

Flotte verfolgen

Wenn Sie eine Flotte verfolgen möchten, müssen Sie einen Flottenstandortanbieter instanziieren und Standorteinschränkungen für den Darstellungsbereich der Karte festlegen, wie in den folgenden Abschnitten beschrieben.

Anbieter von Flottenstandorten instanziieren

Die JavaScript-Bibliothek für die Flottenverfolgung enthält einen Standortanbieter, der mehrere Fahrzeuge von der Fleet Engine abruft.

So instanziieren Sie sie:

  1. Verwenden Sie Ihre Projekt-ID sowie einen Verweis auf Ihren Token-Fetcher.

  2. Fahrzeugfilterabfrage verwenden: Mit der Fahrzeugfilterabfrage wird gesteuert, welche Fahrzeuge auf der Karte angezeigt werden. Der Filter wird an Fleet Engine übergeben.

  3. Begrenzungsbereich für die Fahrzeuganzeige festlegen Mit locationRestriction können Sie den Bereich einschränken, in dem Fahrzeuge auf der Karte angezeigt werden. Der Standortanbieter ist erst aktiv, wenn dies festgelegt wurde. Sie können Standortgrenzen entweder im Konstruktor oder nach dem Konstruktor festlegen.

  4. Kartenansicht initialisieren

In den folgenden Beispielen wird gezeigt, wie ein Standortanbieter für die Flotte sowohl für On-Demand- als auch für geplante Aufgaben instanziiert wird. In diesen Beispielen wird auch gezeigt, wie Sie locationRestriction im Konstruktor verwenden, um den Standortanbieter zu aktivieren.

On-Demand-Fahrten

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

Geplante Aufgaben

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

Wenn Sie locationRestriction nach dem Konstruktor festlegen möchten, fügen Sie locationProvider.locationRestriction später im Code hinzu, wie im folgenden JavaScript-Beispiel gezeigt.

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

Standortbeschränkung mithilfe des Kartendarstellungsbereichs festlegen

Sie können auch locationRestriction-Grenzen festlegen, die dem Bereich entsprechen, der derzeit in der Kartenansicht sichtbar ist.

On-Demand-Fahrten

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Geplante Aufgaben

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Kartenansicht initialisieren

Nachdem Sie den Standortanbieter erstellt haben, initialisieren Sie die Kartenansicht auf dieselbe Weise wie beim Verfolgen eines einzelnen Fahrzeugs.

Nachdem Sie die JavaScript-Bibliothek für die Fahrtenfreigabe geladen haben, initialisieren Sie die Kartenansicht und fügen Sie sie der HTML-Seite hinzu. Ihre Seite sollte ein <div>-Element enthalten, das die Kartenansicht enthält. Das <div>-Element wird in den folgenden Beispielen map_canvas genannt.

On-Demand-Fahrten

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Geplante Aufgaben

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
});

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Auf Ereignisse warten und Fehler beheben

Nachdem Sie mit dem Folgen der Flotte begonnen haben, müssen Sie auf Ereignisänderungen achten und alle auftretenden Fehler wie in den folgenden Abschnitten beschrieben beheben.

Auf Änderungsereignisse warten

Sie können Metainformationen zur Flotte über den Standortanbieter aus dem Fahrzeugobjekt abrufen. Änderungen an den Metainformationen lösen ein Aktualisierungsereignis aus. Die Metainformationen umfassen Fahrzeugeigenschaften wie Navigationsstatus, verbleibende Strecke und benutzerdefinierte Attribute.

Weitere Informationen finden Sie hier:

Die folgenden Beispiele zeigen, wie Sie diese Änderungsereignisse beobachten können.

On-Demand-Fahrten

JavaScript

locationProvider.addListener('update', e => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  for (vehicle of e.vehicles) {
    console.log(vehicle.navigationStatus);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

Geplante Aufgaben

JavaScript

locationProvider.addListener('update', e => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

Auf Fehler warten

Außerdem sollten Sie auf Fehler achten und diese beheben, die beim Verfolgen eines Fahrzeugs auftreten. Fehler, die asynchron beim Anfordern von Fahrzeuginformationen auftreten, lösen Fehlerereignisse aus.

Das folgende Beispiel zeigt, wie Sie auf diese Ereignisse warten, um Fehler zu beheben.

JavaScript

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Flotten-Tracking beenden

Wenn Sie die Flotte nicht mehr verfolgen möchten, setzen Sie die Grenzen des Standortanbieters auf „null“ und entfernen Sie den Standortanbieter dann aus der Kartenansicht, wie in den folgenden Abschnitten beschrieben.

Grenzen des Standortanbieters auf null setzen

Wenn Sie verhindern möchten, dass der Standortanbieter die Flotte verfolgt, setzen Sie die Grenzen des Standortanbieters auf „null“.

On-Demand-Fahrten

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Geplante Aufgaben

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Standortanbieter aus der Kartenansicht entfernen

Im folgenden Beispiel wird gezeigt, wie ein Standortanbieter aus der Kartenansicht entfernt wird.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Lieferfahrzeug verfolgen und gleichzeitig eine Lieferflotte im Blick behalten

Wenn Sie Mobility Services für geplante Aufgaben verwenden, können Sie sowohl eine Flotte als auch die Route und die anstehenden Aufgaben für ein bestimmtes Lieferfahrzeug in derselben Kartenansicht anzeigen lassen. Instanziieren Sie dazu sowohl einen Standortanbieter für die Lieferflotte als auch einen Standortanbieter für das Lieferfahrzeug und fügen Sie beide der Kartenansicht hinzu. Nach der Instanziierung werden die Lieferfahrzeuge auf der Karte angezeigt. Die folgenden Beispiele zeigen, wie beide Standortanbieter instanziiert werden:

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

Markierungsanpassung verwenden, um ein Lieferfahrzeug zu verfolgen

So aktivieren Sie den Standortanbieter für Lieferfahrzeuge, um ein Lieferfahrzeug zu verfolgen, wenn Sie auf die entsprechende Flottenmarkierung klicken:

  1. Markierung anpassen und Klickaktion hinzufügen

  2. Blenden Sie die Markierung aus, um doppelte Markierungen zu vermeiden.

Beispiele für diese Schritte finden Sie in den folgenden Abschnitten.

Markierung anpassen und Klickaktion hinzufügen

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

Markierung ausblenden, um doppelte Markierungen zu vermeiden

Blenden Sie die Markierung des Lieferfahrzeug-Standortanbieters aus, um zu verhindern, dass zwei Markierungen für dasselbe Fahrzeug gerendert werden:

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

Nächste Schritte