Diese Seite wurde von der Cloud Translation API übersetzt.

Flotte ansehen

In diesem Abschnitt wird gezeigt, wie Sie die JavaScript-Flotten-Tracking-Bibliothek verwenden um eine Flotte anzusehen. Bei diesen Verfahren wird davon ausgegangen, dass Sie die Flotte eingerichtet haben und eine Karte geladen. Weitere Informationen finden Sie unter Richten Sie die JavaScript-Flotten-Tracking-Bibliothek ein.

In diesem Dokument werden die folgenden Möglichkeiten erläutert, die Ihnen beim Anzeigen eines Flotte:

Tracking der Flotte starten.
Auf Ereignisse warten und Fehler beheben
Tracking beenden:
Ein einzelnes Fahrzeug verfolgen, während eine Flotte angezeigt wird

Flotte verfolgen

Zum Nachverfolgen einer Flotte müssen Sie einen Flottenstandortanbieter instanziieren und Standortbeschränkungen für den Darstellungsbereich der Karte festlegen, wie im Folgenden beschrieben .

Anbieter von Flottenstandorten instanziieren

Die JavaScript-Flottenverfolgungsbibliothek enthält einen Standortanbieter, der ruft mehrere Fahrzeuge von Fleet Engine ab.

So instanziieren Sie es:

Verwenden Sie Ihre Projekt-ID sowie einen Verweis auf Ihren Token-Abruf.
Eine Fahrzeugfilterabfrage verwenden: Mit der Fahrzeugfilteranfrage wird festgelegt, die auf der Karte angezeigt werden. Der Filter wird an Fleet Engine übergeben.
- Verwenden Sie für On-Demand-Dienste vehicleFilter und lesen Sie den Artikel zu ListVehiclesRequest.filter.
- Verwenden Sie für geplante Aufgaben deliveryVehicleFilter und prüfen Sie, ListDeliveryVehiclesRequest.filter
Legen Sie die Begrenzung für die Fahrzeuganzeige fest. locationRestriction für Folgendes verwenden: den Bereich einschränken, in dem Fahrzeuge auf der Karte angezeigt werden sollen. Standort Anbieter ist erst aktiv, wenn dies festgelegt wurde. Sie können Standortgrenzen festlegen: im Konstruktor oder nach dem Konstruktor.
Kartenansicht initialisieren

Die folgenden Beispiele zeigen, wie ein Flottenstandortanbieter für On-Demand- und geplanten Aufgabenszenarien. Diese Beispiele zeigen auch, wie locationRestriction im Konstruktor, um den Standortanbieter festzulegen aktiv ist.

On-Demand-Reisen

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"',
        });

Um locationRestriction nach dem Konstruktor festzulegen, fügen Sie die Methode locationProvider.locationRestriction später im Code als 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 Darstellungsbereichs der Karte festlegen

Sie können auch locationRestriction-Grenzen festlegen, die dem aktuellen Gebiet entsprechen. die in der Kartenansicht sichtbar sind.

On-Demand-Reisen

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 im selben wenn Sie einem einzelnen Fahrzeug folgen.

Nach dem Laden der Bibliothek für das Teilen von Kaufprozessen initialisieren Kartenansicht und fügen sie der HTML-Seite hinzu. Ihre Seite sollte Folgendes enthalten: Ein <div>-Element, das die Kartenansicht enthält Das <div>-Element heißt in den folgenden Beispielen map_canvas.

On-Demand-Reisen

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 verarbeiten

Sobald Sie begonnen haben, der Flotte zu folgen, müssen Sie auf Ereignisänderungen warten und beheben mögliche Fehler wie in den folgenden Abschnitten beschrieben.

Auf Änderungsereignisse warten

Sie können Meta-Informationen zur Flotte aus dem Fahrzeugobjekt abrufen: Standortanbieter Änderungen an den Metainformationen lösen ein Update aus . Die Metainformationen umfassen Fahrzeugeigenschaften wie die Navigation Status, verbleibende Strecke und benutzerdefinierte Attribute.

Weitere Informationen:

Die folgenden Beispiele zeigen, wie auf diese Änderungsereignisse gewartet wird.

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 auf Fehler warten und diese beheben, Fahrzeug. Fehler, die asynchron bei der Anforderung des Fahrzeugs auftreten lösen Fehlerereignisse aus.

Das folgende Beispiel zeigt, wie auf 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 verfolgen

Um das Tracking der Flotte zu beenden, setzen Sie die Grenzen des Standortanbieters auf null, und entfernen Sie dann den Standortanbieter aus der Kartenansicht, wie in den folgenden Abschnitten.

Grenzen des Standortanbieters auf null festlegen

Legen Sie Grenzen fest, um zu verhindern, dass der Standortanbieter die Flotte verfolgt des Standortanbieters auf null setzen.

On-Demand-Reisen

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 und Lieferflotte ansehen

Wenn Sie Mobilitätsdienste für geplante Aufgaben verwenden, können Sie sowohl eine Fuhrpark und Anzeige der Route und der anstehenden Aufgaben für ein bestimmtes Lieferfahrzeug in derselben Kartenansicht angezeigt. Instanziieren Sie dazu sowohl einen Standort der Lieferflotte Anbieter und Lieferunternehmen und fügen Sie beide der Karte hinzu. Ansicht. Nach der Instanziierung zeigt der Anbieter des Flottenstandorts Lieferfahrzeuge auf der Karte zu sehen. Die folgenden Beispiele zeigen, wie die Instanziierung für beide Standortanbieter:

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

Mit benutzerdefinierten Markierungen ein Lieferfahrzeug verfolgen

Damit der Standortanbieter des Lieferfahrzeugs ein Lieferfahrzeug verfolgen kann wenn Sie auf die Flottenmarkierung klicken, gehen Sie so vor:

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

Hinweis: Der Standortanbieter der 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 das Fahrzeug klickt, instanziieren Sie den Standort eines Lieferfahrzeugs. und geben Sie als Fahrzeug-ID die ID an, auf die der Nutzer geklickt hat, im folgenden Beispiel. In diesem Fall wird das Lieferfahrzeug Der Standortanbieter rendert auch eine Markierung für das Fahrzeug gemäß zu erledigen). Eine davon wird ausgeblendet, damit es nicht zwei Markierungen für denselben Fahrzeug.

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

Markierung vor dem Standortanbieter des Lieferfahrzeugs ausblenden, um das Rendern zu verhindern zwei Markierungen für dasselbe Fahrzeug:

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