Flotte ansehen

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

In diesem Dokument werden die folgenden Möglichkeiten beschrieben, die Sie beim Ansehen einer Flotte haben:

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

Flotte verfolgen

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

Standortanbieter für die Flotte instanziieren

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

So instanziieren Sie ihn:

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

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

  3. Legen Sie den Begrenzungsbereich für die Fahrzeuganzeige fest. Verwenden Sie locationRestriction, um den Bereich zu begrenzen, in dem Fahrzeuge auf der Karte angezeigt werden. Der Standortanbieter ist erst aktiv, wenn diese Einstellung festgelegt ist. Sie können Standortgrenzen entweder im Konstruktor oder nach dem Konstruktor festlegen.

  4. Initialisieren Sie die Kartenansicht.

Die folgenden Beispiele zeigen, wie Sie einen Standortanbieter für die Flotte für On-Demand- und geplante Aufgaben instanziieren. 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 in Ihrem 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 mit dem Darstellungsbereich der Karte festlegen

Sie können auch locationRestriction-Grenzwerte 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.

Initialisieren Sie nach dem Laden der JavaScript-Bibliothek für die Routenfreigabe 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 heißt in den folgenden Beispielen map_canvas.

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 behandeln

Nachdem Sie mit der Verfolgung der Flotte begonnen haben, müssen Sie auf Ereignisänderungen warten und alle Fehler behandeln, die auftreten, wie in den folgenden Abschnitten beschrieben.

Auf Änderungsereignisse warten

Sie können Metainformationen zur Flotte aus dem Fahrzeugobjekt mit dem Standortanbieter abrufen. Änderungen an den Metainformationen lösen ein update-Ereignis aus. Die Metainformationen enthalten Fahrzeugeigenschaften wie den Navigationsstatus, die verbleibende Entfernung und benutzerdefinierte Attribute.

Weitere Informationen finden Sie unter:

Die folgenden Beispiele zeigen, wie Sie auf diese Änderungsereignisse warten.

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

Sie sollten auch auf Fehler warten und diese behandeln, die beim Verfolgen eines Fahrzeugs auftreten. Fehler, die asynchron durch das Anfordern von Fahrzeuginformationen entstehen, lösen Fehlerereignisse aus.

Das folgende Beispiel zeigt, wie Sie auf diese Ereignisse warten, damit Sie Fehler behandeln können.

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

Verfolgung der Flotte beenden

Wenn Sie die Verfolgung der Flotte beenden 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.

Grenzwerte 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

Das folgende Beispiel zeigt, wie Sie einen Standortanbieter aus der Kartenansicht entfernen.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Lieferfahrzeug verfolgen, während Sie eine Lieferflotte ansehen

Wenn Sie Mobility-Dienste für geplante Aufgaben verwenden, können Sie sowohl eine Flotte ansehen als auch die Route und die anstehenden Aufgaben für ein bestimmtes Lieferfahrzeug in derselben Kartenansicht anzeigen. Dazu müssen Sie sowohl einen Standortanbieter für die Lieferflotte als auch einen Standortanbieter für das Lieferfahrzeug instanziieren und beide der Kartenansicht hinzufügen. Nach der Instanziierung werden mit dem Standortanbieter für die Lieferflotte Lieferfahrzeuge auf der Karte angezeigt. Die folgenden Beispiele zeigen, wie Sie beide Standortanbieter instanziieren:

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

Lieferfahrzeug mit Markierungsanpassung verfolgen

So ermöglichen Sie dem Standortanbieter für das Lieferfahrzeug, ein Lieferfahrzeug zu verfolgen, wenn Sie auf die Flottenmarkierung klicken:

  1. Passen Sie eine Markierung an und fügen Sie eine Klickaktion hinzu.

  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 Standortanbieters für das Lieferfahrzeug 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