Diese Seite wurde von der Cloud Translation API übersetzt.

Flotte ansehen

In diesem Abschnitt wird gezeigt, wie Sie die JavaScript-Flotten-Tracking-Bibliothek zum Aufrufen einer Flotte verwenden. Bei diesen Verfahren wird davon ausgegangen, dass Sie die Bibliothek für die Fahrzeugverfolgung eingerichtet und eine Karte geladen haben. Weitere Informationen finden Sie unter JavaScript-Flotten-Tracking-Bibliothek einrichten.

In diesem Dokument werden die folgenden Funktionen beschrieben, die Sie in der Ansicht einer Flotte nutzen können:

Beginnen Sie mit dem Tracking der Flotte.
Auf Ereignisse warten und Fehler behandeln
Tracking beenden
Ein einzelnes Fahrzeug in einer Flottenansicht verfolgen

Flotte verfolgen

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

Anbieter von Flottenstandorten instanziieren

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

So erstellen Sie eine Instanz:

Verwende deine Projekt-ID und eine Referenz auf deinen Token-Abruf.
Fahrzeugfilterabfrage verwenden Mit der Fahrzeugfilterabfrage wird festgelegt, welche Fahrzeuge auf der Karte angezeigt werden. Der Filter wird an Fleet Engine übergeben.
- Verwenden Sie für On-Demand-Dienste vehicleFilter und lesen Sie ListVehiclesRequest.filter.
- Verwenden Sie für geplante Aufgaben deliveryVehicleFilter und sehen Sie sich ListDeliveryVehiclesRequest.filter an.
Begrenzung für die Fahrzeuganzeige festlegen Verwenden Sie locationRestriction, um den Bereich einzuschränken, in dem Fahrzeuge auf der Karte angezeigt werden sollen. Der Standortanbieter ist erst aktiv, wenn dies festgelegt wurde. Sie können Standortgrenzen entweder im Konstruktor oder nach dem Konstruktor festlegen.
Kartenansicht initialisieren

In den folgenden Beispielen wird gezeigt, wie Sie einen Anbieter für Fahrzeugstandorte sowohl für On-Demand- als auch für geplante Aufgaben instanziieren. In diesen Beispielen wird auch gezeigt, wie Sie den Standortanbieter mithilfe von locationRestriction im Konstruktor aktivieren.

Fahrten auf Abruf

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 Ihren Code ein, 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 über den Darstellungsbereich der Karte festlegen

Sie können auch locationRestriction-Grenzen festlegen, damit sie dem aktuell in der Kartenansicht sichtbaren Bereich entsprechen.

Fahrten auf Abruf

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 Folgen eines einzelnen Fahrzeugs.

Nachdem Sie die JavaScript-Bibliothek für die Reisefreigabe 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 heißt in den folgenden Beispielen map_canvas.

Fahrten auf Abruf

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

Sobald Sie die Verfolgung der Flotte gestartet haben, müssen Sie auf Ereignisänderungen achten und alle auftretenden Fehler wie in den folgenden Abschnitten beschrieben behandeln.

Auf Änderungsereignisse warten

Sie können Metadaten zur Flotte über den Standortanbieter aus dem Fahrzeugobjekt 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 reagieren.

On-Demand-Reisen

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 Fehler, die beim Folgen eines Fahrzeugs auftreten, überwachen und behandeln. Fehler, die asynchron beim Anfordern von Fahrzeuginformationen auftreten, lösen Fehlerereignisse aus.

Das folgende Beispiel zeigt, wie Sie auf diese Ereignisse warten, um Fehler beheben zu 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);
});

Flotte nicht mehr beobachten

Wenn Sie das Tracking der Flotte beenden möchten, setzen Sie die Grenzen des Standortanbieters auf „null“ und entfernen Sie ihn dann wie in den folgenden Abschnitten beschrieben aus der Kartenansicht.

Grenzen des Standortanbieters auf „null“ setzen

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

Fahrten auf Abruf

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 eine Lieferflotte angezeigt wird

Wenn Sie Mobilitätsdienste für geplante Aufgaben verwenden, können Sie in derselben Kartenansicht sowohl eine Flotte als auch die Route und anstehende Aufgaben für ein bestimmtes Lieferfahrzeug anzeigen. Erstellen Sie dazu einen Standortanbieter für die Lieferflotte und einen Standortanbieter für Lieferfahrzeuge und fügen Sie beide der Kartenansicht hinzu. Nach der Instanziierung zeigt der Anbieter der Standorte der Lieferflotte Lieferfahrzeuge auf der Karte an. 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 mithilfe von Markierungsanpassungen verfolgen

So aktivieren Sie, dass der Anbieter der Standortinformationen für Lieferfahrzeuge ein Lieferfahrzeug verfolgen kann, wenn Sie auf die entsprechende Flottchenmarkierung klicken:

Passen Sie eine Markierung an und fügen Sie eine Klickaktion hinzu.
Blenden Sie die Markierung aus, um Duplikate zu vermeiden.

Hinweis :Der Standortanbieter der Lieferflotte rendert eine Reihe von Markierungen, eine für jedes verfolgte Fahrzeug. Wenn Sie Details für ein Fahrzeug anzeigen möchten, wenn der Nutzer darauf klickt, müssen Sie einen Anbieter für den Standort des Lieferfahrzeugs instanziieren und die Fahrzeug-ID auf diejenige festlegen, auf die der Nutzer geklickt hat, wie im folgenden Beispiel gezeigt. Wenn Sie dies tun, wird jedoch auch vom Anbieter der Fahrzeugposition eine Markierung für dieses Fahrzeug gerendert (wie vorgesehen). Sie blenden also eine davon aus, damit es nicht zwei Markierungen für dasselbe Fahrzeug gibt.

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

Sie können die Markierung vor dem Standortanbieter des Lieferfahrzeugs ausblenden, 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

Kartenstil festlegen