Afficher un parc

Cette section explique comment utiliser la bibliothèque de suivi de flotte JavaScript pour afficher une flotte. Ces procédures supposent que vous avez configuré la bibliothèque de suivi de la flotte et chargé une carte. Pour en savoir plus, consultez la section Configurer la bibliothèque de suivi de flotte JavaScript.

Ce document décrit les actions suivantes que vous pouvez effectuer lorsque vous consultez une flotte:

1. Commencez à suivre la flotte.
2. Écoutez les événements et gérez les erreurs.
3. Arrêtez le suivi.
4. Suivre un seul véhicule lorsque vous consultez un parc

Commencer à suivre la flotte

Pour suivre une flotte, vous devez instancier un fournisseur de position de flotte et définir des restrictions de localisation pour le viewport de la carte, comme décrit dans les sections suivantes.

Instancier un fournisseur de position de parc

La bibliothèque de suivi de flotte JavaScript inclut un fournisseur de position qui extrait plusieurs véhicules de Fleet Engine.

Pour l'instancier, procédez comme suit:

1. Utilisez votre ID de projet ainsi qu'une référence à votre récupérateur de jetons.

2. Utiliser une requête de filtre de véhicule La requête de filtre de véhicule contrôle les véhicules affichés sur la carte. Le filtre est transmis à Fleet Engine.

   • Pour les services à la demande, utilisez vehicleFilter et consultez ListVehiclesRequest.filter.
   • Pour les tâches planifiées, utilisez deliveryVehicleFilter et consultez ListDeliveryVehiclesRequest.filter.

3. Définir la zone de délimitation pour l'affichage du véhicule Utilisez locationRestriction pour limiter la zone dans laquelle afficher les véhicules sur la carte. Le fournisseur de position n'est pas actif tant que ce paramètre n'est pas défini. Vous pouvez définir les limites de localisation dans le constructeur ou après le constructeur.

4. Initialisez la vue Carte.

Les exemples suivants montrent comment instancier un fournisseur de localisation de flotte pour les scénarios de tâches à la demande et planifiées. Ces exemples montrent également comment utiliser locationRestriction dans le constructeur pour activer le fournisseur de position.

Voyages à la demande

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

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

Tâches planifiées

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

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

Pour définir locationRestriction après le constructeur, ajoutez locationProvider.locationRestriction plus tard dans votre code, comme indiqué dans l'exemple JavaScript suivant.

   // 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,
   };

Définir une restriction en fonction de l'emplacement à l'aide de la fenêtre d'affichage de la carte

Vous pouvez également définir des limites locationRestriction pour qu'elles correspondent à la zone actuellement visible dans la vue cartographique.

Voyages à la demande

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

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

Tâches planifiées

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

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

Initialiser la vue Carte

Une fois le fournisseur de position créé, initialisez la vue de la carte de la même manière que lorsque vous suivez un seul véhicule.

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

Voyages à la demande

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

Tâches planifiées

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

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

Une fois que vous avez commencé à suivre la flotte, vous devez écouter les modifications d'événements et gérer les erreurs qui surviennent, comme décrit dans les sections suivantes.

Écouter les événements de modification

Vous pouvez récupérer des métadonnées sur le parc à partir de l'objet véhicule à l'aide du fournisseur de position. Les modifications apportées aux métadonnées déclenchent un événement de mise à jour. Les métadonnées incluent les propriétés du véhicule, telles que l'état de navigation, la distance restante et les attributs personnalisés.

Pour en savoir plus, consultez les pages suivantes:

• Documentation de référence sur les options de véhicule pour les trajets à la demande
• Documentation de référence sur les options de véhicule pour les tâches planifiées

Les exemples suivants montrent comment écouter ces événements de modification.

Voyages à la demande

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

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

Tâches planifiées

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

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

Écouter les erreurs

Vous devez également écouter et gérer les erreurs qui se produisent lors du suivi d'un véhicule. Les erreurs qui surviennent de manière asynchrone lors de la demande d'informations sur le véhicule déclenchent des événements d'erreur.

L'exemple suivant montre comment écouter ces événements afin de pouvoir gérer les erreurs.

locationProvider.addListener('error', e => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error is the error that triggered the event.
  console.error(e.error);
});

Arrêter le suivi de la flotte

Pour arrêter le suivi de la flotte, définissez les limites du fournisseur de position sur "null", puis supprimez le fournisseur de position de la vue de la carte, comme décrit dans les sections suivantes.

Définir les limites du fournisseur de position sur "null"

Pour empêcher le fournisseur de position de suivre la flotte, définissez les limites du fournisseur de position sur "null".

Voyages à la demande

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

Tâches planifiées

locationProvider.locationRestriction = null;

locationProvider.locationRestriction = null;

Supprimer le fournisseur de position de la vue de la carte

L'exemple suivant montre comment supprimer un fournisseur de position de la vue cartographique.

mapView.removeLocationProvider(locationProvider);

mapView.removeLocationProvider(locationProvider);

Suivre un véhicule de livraison lorsque vous consultez un parc de véhicules de livraison

Si vous utilisez les services de mobilité pour les tâches planifiées, vous pouvez afficher une flotte et l'itinéraire et les tâches à venir d'un véhicule de livraison spécifique dans la même vue cartographique. Pour ce faire, instanciez à la fois un fournisseur de position de la flotte de livraison et un fournisseur de position du véhicule de livraison, puis ajoutez-les tous les deux à la vue de la carte. Une fois instancié, le fournisseur de position de la flotte de livraison commence à afficher les véhicules de livraison sur la carte. Les exemples suivants montrent comment instancier les deux fournisseurs de position:

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

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

Utiliser la personnalisation des repères pour suivre un véhicule de livraison

Pour permettre au fournisseur de localisation des véhicules de livraison de suivre un véhicule de livraison lorsque vous cliquez sur son repère de parc, procédez comme suit:

1. Personnalisez un repère et ajoutez une action de clic.

2. Masquer le repère pour éviter les repères en double

Des exemples de ces étapes sont fournis dans les sections suivantes.

Personnaliser un repère et ajouter une action de clic

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

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

Masquer le repère pour éviter les repères en double

Masquer le repère du fournisseur de localisation du véhicule de livraison pour éviter d'afficher deux repères pour le même véhicule:

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

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

Étape suivante

• Appliquer un style à une carte