Fahrzeug verfolgen

In diesem Abschnitt wird gezeigt, wie Sie mit der JavaScript-Flotten-Tracking-Bibliothek ein für On-Demand-Fahrten oder geplante Aufgaben nutzen.

So können Sie ein Fahrzeug verfolgen:

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

Bibliothek laden und Kartenansicht initialisieren

Um den Flottenbetrieb auf einer Karte auf Ihrer Webseite anzuzeigen, verwenden Sie ein Skript, das mithilfe Ihres API-Schlüssels eine Karte aufruft. Das folgende Beispiel zeigt, über HTML:

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

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

  • libraries-Parameter: Lädt die Flotten-Tracking-Bibliothek.

  • Attribut defer: Damit setzt der Browser das Rendern des restlichen 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 beide einen Anbieter von Fahrzeugstandorten instanziieren und initialisieren Sie eine Kartenansicht mit der Fahrzeug-ID, wie im Folgenden beschrieben. .

Anbieter von Fahrzeugstandorten instanziieren

Die JavaScript-Flottenverfolgungsbibliothek enthält einen Standortanbieter für die Flotte Engine API Projekt-ID und einen Verweis auf den Tokenabruf verwenden um sie zu instanziieren, wie in den folgenden Beispielen gezeigt.

On-Demand-Reisen

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

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 &lt;div&gt;-Element, das die Kartenansicht enthält Das &lt;div&gt;-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 du mit der Verfolgung eines Fahrzeugs begonnen hast, möchtest du seine Strecke auf einer Karte aktualisieren Fehler auf der Route des Fahrzeugs zu beheben.

Auf Fahrzeugereignisse warten

Um den Fortschritt eines Fahrzeugs für On-Demand-Fahrten oder geplante Aufgaben zu verfolgen, auf Änderungsereignisse warten müssen.

Sie rufen Meta aus dem vehicle- oder deliveryVehicle-Objekt ab, indem Sie den Standortanbieter. Die Metainformationen enthalten die voraussichtliche Ankunftszeit und die verbleibende Strecke. vor der nächsten Abholung oder Abgabe. Änderungen an den Metainformationen Ein update-Ereignis beim Standortanbieter auslösen

Das folgende Beispiel zeigt, wie auf diese Änderungsereignisse gewartet wird.

On-Demand-Reisen

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

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 &lt;div&gt;-Element, das die Kartenansicht enthält Das &lt;div&gt;-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);

Fahrzeugverfolgung beenden

Wenn Sie die Verfolgung eines Fahrzeugs beenden möchten, müssen Sie es beim Standortanbieter entfernen und Entfernen Sie den Standortanbieter wie nachfolgend beschrieben aus der Kartenansicht. . Die Beispiele hier gelten sowohl für On-Demand-Fahrten als auch für geplante Aufgaben Implementierung.

Fahrzeug vom Standortanbieter entfernen

Um zu verhindern, dass der Standortanbieter ein Fahrzeug ortet, entferne die vom Standortanbieter.

On-Demand-Reisen

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Geplante Aufgaben

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

Nächste Schritte