Fahrzeug verfolgen

In diesem Abschnitt wird gezeigt, wie Sie mit der JavaScript-Flotten-Tracking-Bibliothek ein Fahrzeug für Fahrten auf Abruf oder geplante Aufgaben verfolgen.

So können Sie ein Fahrzeug verfolgen:

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

Bibliothek laden und Kartenansicht initialisieren

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

• URL-Quelle: Ruft die Google Maps API auf, um mithilfe Ihres API-Schlüssels eine Karte anzufordern.

• callback-Parameter: Die initMap-Funktion wird ausgeführt, nachdem die API den Aufruf zurückgegeben hat.

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

• defer-Attribut: Damit kann der Browser den Rest der Seite weiter 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>
  

Standort des Fahrzeugs und Kartenansicht angeben

Wenn Sie ein Fahrzeug verfolgen möchten, müssen Sie wie in den folgenden Abschnitten beschrieben einen Anbieter für die Fahrzeugstandortermittlung instanziieren und eine Kartenansicht mit der Fahrzeug-ID initialisieren.

Anbieter für Fahrzeugstandort erstellen

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

Fahrten auf Abruf

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

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

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

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

Geplante Aufgaben

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

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

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

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

Kartenansicht initialisieren

Initialisieren Sie nach dem Laden der Bibliothek für das Teilen der Reise 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

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

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

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

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 dem Tracking eines Fahrzeugs begonnen haben, möchten Sie seinen Fortschritt auf einer Karte aktualisieren und Fehler beheben, während das Fahrzeug seine Route abfährt.

Auf Fahrzeug-Ereignisse warten

Wenn Sie den Fortschritt eines Fahrzeugs für On-Demand-Fahrten oder geplante Aufgaben verfolgen möchten, müssen Sie auf Änderungsereignisse warten.

Sie rufen Metadaten aus dem vehicle- oder deliveryVehicle-Objekt mithilfe des Standortanbieters ab. Die Metadaten enthalten die geschätzte Ankunftszeit und die verbleibende Entfernung bis zur nächsten Abholung oder Abgabe des Fahrzeugs. Änderungen an den Metadaten lösen ein Update-Ereignis beim Standortanbieter aus.

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

On-Demand-Reisen

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

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

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

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

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

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

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

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

Fahrzeugverfolgung beenden

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

Fahrzeug aus dem Standortanbieter entfernen

Wenn Sie nicht möchten, dass der Standortanbieter ein Fahrzeug verfolgt, entfernen Sie die ID des Lieferfahrzeugs vom Standortanbieter.

Fahrten auf Abruf

locationProvider.vehicleId = '';

locationProvider.vehicleId = '';

Geplante Aufgaben

locationProvider.deliveryVehicleId = '';

locationProvider.deliveryVehicleId = '';

Standortanbieter aus der Kartenansicht entfernen

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

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Nächste Schritte

• Lieferflotte ansehen
• Kartenstil festlegen