Suivre un véhicule

Cette section explique comment utiliser la bibliothèque de suivi de parc JavaScript pour suivre un véhicule pour des trajets à la demande ou des tâches planifiées.

Pour suivre un véhicule, procédez comme suit :

  1. Charger la bibliothèque et initialiser la vue plan
  2. Indiquer la position du véhicule et la vue de la carte
  3. Écouter les événements et gérer les erreurs
  4. Arrêter le suivi

Charger la bibliothèque et initialiser la vue plan

Pour afficher les opérations de votre flotte sur une carte de votre page Web, utilisez un script qui appelle une carte à l'aide de votre clé API. L'exemple suivant montre comment procéder à partir d'un code HTML:

  • Source d'URL : appelle l'API Google Maps pour demander une carte à l'aide de votre clé API.

  • Paramètre callback: exécute la fonction initMap une fois que l'API a renvoyé l'appel.

  • Paramètre libraries : charge la bibliothèque de suivi de la flotte.

  • Attribut defer : permet au navigateur de continuer à afficher le reste de la page pendant que l'API charge.

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

Indiquer l'emplacement du véhicule et la vue de la carte

Pour commencer à suivre un véhicule, vous devez instancier un fournisseur de position de véhicule et initialiser une vue cartographique avec l'ID du véhicule, comme décrit dans les sections suivantes.

Instancier un fournisseur de services de localisation de véhicule

La bibliothèque de suivi de flotte JavaScript inclut un fournisseur de position pour l'API Fleet Engine. Utilisez l'ID de votre projet et une référence à votre outil de récupération de jetons pour l'instancier, comme indiqué dans les exemples suivants.

Voyages à la demande

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

Tâches planifiées

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

Initialiser la vue Carte

Après avoir chargé la bibliothèque JavaScript de partage de parcours, initialisez la vue de la carte et ajoutez-la à la page HTML. Votre page doit contenir un élément <div> qui contient la vue de la carte. L'élément <div> est nommé map_canvas dans les exemples suivants.=

Trajets à la demande

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

Tâches planifiées

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

Écouter des événements et gérer les erreurs

Une fois que vous avez commencé à suivre un véhicule, vous devez mettre à jour sa progression sur une carte et gérer les erreurs au fur et à mesure de son trajet.

Écouter les événements de véhicule

Pour suivre la progression d'un véhicule pour les trajets à la demande ou les tâches planifiées, vous devez écouter les événements de modification.

Vous récupérez les métadonnées de l'objet vehicle ou deliveryVehicle à l'aide du fournisseur de position. Les métadonnées incluent l'heure d'arrivée prévue et la distance restante avant la prochaine prise en charge ou dépose du véhicule. Les modifications apportées aux métadonnées déclenchent un événement de mise à jour dans le fournisseur de position.

L'exemple suivant montre comment écouter ces événements de modification.

Voyages à la demande

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

Tâches planifiées

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

Gérer les erreurs

Après avoir chargé la bibliothèque JavaScript Journey Sharing, initialisez la vue de carte et ajoutez-la à la page HTML. Votre page doit contenir un élément <div> qui contient la vue de la carte. L'élément <div> est nommé map_canvas dans les exemples suivants.=

Trajets à la demande

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

Tâches planifiées

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

Arrêter de suivre un véhicule

Pour arrêter le suivi d'un véhicule, vous devez le supprimer du fournisseur de position et le fournisseur de position de la vue cartographique, comme décrit dans les sections suivantes. Les exemples présentés ici s'appliquent à la fois à l'implémentation de trajets à la demande et de tâches planifiées.

Supprimer un véhicule du fournisseur de position

Pour empêcher le fournisseur de localisation de suivre un véhicule, supprimez l'ID du véhicule de livraison du fournisseur de localisation.

Voyages à la demande

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Tâches planifiées

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

Supprimer le fournisseur de position de la vue cartographique

L'exemple suivant montre comment supprimer un fournisseur de localisation de la vue plan.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Étape suivante