Fahrzeug verfolgen

In diesem Abschnitt wird gezeigt, wie Sie die JavaScript-Bibliothek für die Flottenverfolgung verwenden, um ein Fahrzeug für On-Demand-Fahrten oder geplante Aufgaben zu verfolgen.

So verfolgen Sie ein Fahrzeug:

  1. Bibliothek laden und Kartenansicht initialisieren
  2. Fahrzeugstandort und Kartenansicht bereitstellen
  3. Auf Ereignisse warten und Fehler verarbeiten
  4. Tracking beenden

Bibliothek laden und Kartenansicht initialisieren

Wenn Sie Ihre Flottenvorgänge auf einer Karte auf Ihrer Webseite anzeigen möchten, verwenden Sie ein Skript, das mit Ihrem API-Schlüssel eine Karte aufruft. Das folgende Beispiel zeigt, wie das in HTML funktioniert:

  • URL-Quelle: Ruft die Google Maps API auf, um eine Karte mit Ihrem API-Schlüssel anzufordern.

  • callback-Parameter: Führt die initMap-Funktion aus, nachdem die API den Aufruf zurückgegeben hat.

  • libraries-Parameter: Lädt die Bibliothek für das Flotten-Tracking.

  • defer-Attribut: Ermöglicht es dem Browser, den Rest Ihrer Seite weiter zu rendern, während die API geladen wird.

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

Fahrzeugstandort und Kartenansicht bereitstellen

Um mit dem Tracking eines Fahrzeugs zu beginnen, müssen Sie sowohl einen Anbieter für den Fahrzeugstandort instanziieren als auch eine Kartenansicht mit der Fahrzeug-ID initialisieren. Das wird in den folgenden Abschnitten beschrieben.

Fahrzeugstandortanbieter instanziieren

Die JavaScript-Bibliothek für die Flottenverfolgung enthält einen Standortanbieter für die Fleet Engine API. Verwenden Sie Ihre Projekt-ID und einen Verweis auf Ihren Token-Fetcher, um ihn wie in den folgenden Beispielen zu instanziieren.

On-Demand-Fahrten

JavaScript

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

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

TypeScript

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

          // Optionally, you may specify
          // vehicleId to immediately start
          // tracking.
          vehicleId: 'your-vehicle-id',
});

Geplante Aufgaben

JavaScript

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

TypeScript

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

Kartenansicht initialisieren

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

Nachdem Sie mit der Verfolgung eines Fahrzeugs begonnen haben, möchten Sie seinen Fortschritt auf einer Karte aktualisieren und Fehler beheben, während das Fahrzeug seine Route zurücklegt.

Auf Fahrzeug-Ereignisse warten

Wenn Sie den Fortschritt eines Fahrzeugs bei On-Demand-Fahrten oder geplanten Aufgaben verfolgen möchten, müssen Sie auf Änderungsereignisse achten.

Sie rufen Metadaten aus dem vehicle- oder deliveryVehicle-Objekt mit dem Standortanbieter ab. Die Meta-Informationen umfassen die voraussichtliche Ankunftszeit und die verbleibende Entfernung bis zur nächsten Abholung oder zum nächsten Zielort. Änderungen an den Metainformationen lösen ein Update-Ereignis im Standortanbieter aus.

Das folgende Beispiel zeigt, wie Sie auf diese Änderungsereignisse warten.

On-Demand-Fahrten

JavaScript

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

TypeScript

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

Geplante Aufgaben

JavaScript

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

TypeScript

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

Fehler verarbeiten

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

Fahrzeug nicht mehr beobachten

Wenn Sie die Ortung eines Fahrzeugs beenden möchten, müssen Sie es aus dem Standortanbieter entfernen und den Standortanbieter aus der Kartenansicht entfernen. Das wird in den folgenden Abschnitten beschrieben. Die Beispiele hier gelten sowohl für die Implementierung von On-Demand-Fahrten als auch für geplante Aufgaben.

Fahrzeug aus dem Standortanbieter entfernen

Wenn Sie verhindern möchten, dass der Standortanbieter ein Fahrzeug verfolgt, entfernen Sie die ID des Lieferfahrzeugs aus dem Standortanbieter.

On-Demand-Fahrten

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Geplante Aufgaben

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

Nächste Schritte