Flotte ansehen

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

In diesem Dokument wird Folgendes beschrieben:

1. Flotte verfolgen
2. Auf Ereignisse warten und Fehler behandeln
3. Nicht mehr beobachten
4. Ein 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 Standortbeschränkungen für den Kartendarstellungsbereich festlegen, wie in den folgenden Abschnitten beschrieben.

Flottenstandortanbieter instanziieren

Die JavaScript-Bibliothek für die Flottenverfolgung enthält einen Standortanbieter, der mehrere Fahrzeuge aus 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 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.

3. Begrenzungsbereich für die Fahrzeugdarstellung 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 ist. Sie können Standortgrenzen entweder im Konstruktor oder danach festlegen.

4. Kartenansicht initialisieren

In den folgenden Beispielen wird gezeigt, wie Sie einen Flottenstandortanbieter 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 Ihren Code ein, wie im folgenden JavaScript-Beispiel gezeigt.

Hinweis: Das Beispiel bezieht sich auf geplante Aufgaben. Wenn Sie dies für On-Demand-Fahrten tun möchten, verwenden Sie stattdessen einfach google.maps.journeySharing.FleetEngineFleetLocationProvider.

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

Nachdem Sie die JavaScript-Bibliothek für das Teilen von Routen geladen haben, initialisieren Sie die Kartenansicht und fügen Sie sie der HTML-Seite hinzu. Ihre Seite sollte ein <div>-Element enthalten, in dem die Kartenansicht angezeigt wird. 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

Sobald Sie der Flotte folgen, müssen Sie auf Ereignisänderungen achten und alle auftretenden Fehler wie in den folgenden Abschnitten beschrieben beheben.

Auf Änderungsereignisse warten

Sie können Meta-Informationen zur Flotte über das Fahrzeugobjekt mit dem Standortanbieter abrufen. Änderungen an den Metainformationen lösen ein Update-Ereignis aus. Die Metainformationen umfassen Fahrzeugeigenschaften wie den Navigationsstatus, die verbleibende Entfernung und benutzerdefinierte Attribute.

Weitere Informationen finden Sie unter:

• Referenz zu Fahrzeugoptionen für On-Demand-Fahrten
• Referenz zu Fahrzeugoptionen für geplante Aufgaben

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

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 achten

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

Im folgenden Beispiel wird gezeigt, 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);
});

Flotte nicht mehr beobachten

Wenn Sie die Flottenverfolgung 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.

Standortanbietergrenzen 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 ein Standortanbieter aus der Kartenansicht entfernt wird.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Lieferfahrzeug verfolgen, während Sie eine Lieferflotte ansehen

Wenn Sie Mobilitätsdienste 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 sehen. Dazu müssen Sie sowohl einen DeliveryFleetLocationProvider als auch einen DeliveryVehicleLocationProvider instanziieren und beide der Kartenansicht hinzufügen. Nach der Instanziierung werden die 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
});

Markierungen anpassen, um ein Lieferfahrzeug zu verfolgen

So aktivieren Sie den Anbieter für den Standort von Lieferfahrzeugen, damit ein Lieferfahrzeug verfolgt werden kann, wenn Sie auf die Flottenmarkierung klicken:

1. Sie können eine Markierung anpassen und eine Klickaktion hinzufügen.

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

   Hinweis: Der Standortanbieter für die Lieferflotte rendert eine Reihe von Markierungen, eine für jedes verfolgte Fahrzeug. Wenn Sie Details zu einem Fahrzeug anzeigen möchten, wenn der Nutzer auf dieses Fahrzeug klickt, instanziieren Sie einen Anbieter für den Standort von Lieferfahrzeugen und legen die Fahrzeug-ID auf die ID des Fahrzeugs fest, auf das der Nutzer geklickt hat, wie im folgenden Beispiel gezeigt. In diesem Fall wird jedoch auch ein Marker für dieses Fahrzeug vom Anbieter des Lieferfahrzeugstandorts gerendert (wie vorgesehen). Sie blenden also einen der beiden Marker aus, damit nicht zwei Marker für dasselbe Fahrzeug angezeigt werden.

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

Markierung anpassen und eine 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 Anbieters für den Standort des Lieferfahrzeugs 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

• Karte gestalten