Cette page a été traduite par l'API Cloud Translation.

Afficher un parc

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

Ce document décrit les différentes actions que vous pouvez effectuer lorsque vous affichez une flotte de véhicules :

Commencer à suivre la flotte
Écouter les événements et gérer les erreurs
Arrêter le suivi
Suivre un véhicule spécifique tout en affichant une flotte

Commencer à suivre la flotte

Pour suivre une flotte, vous devez instancier un fournisseur de localisation de flotte et définir des restrictions de localisation pour la fenêtre d'affichage de la carte, comme décrit dans les sections suivantes.

Instancier un fournisseur de localisation de flotte

La bibliothèque de suivi de flotte JavaScript inclut un fournisseur de localisation qui récupère plusieurs véhicules depuis Fleet Engine.

Pour l'instancier, procédez comme suit :

Utilisez l'ID de votre projet ainsi qu'une référence à votre récupérateur de jetons.
Utilisez une requête de filtrage de véhicules pour sélectionner les véhicules à afficher 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.
Définissez la zone de délimitation pour l'affichage des véhicules. Utilisez locationRestriction pour limiter la zone dans laquelle afficher les véhicules sur la carte. Le fournisseur de localisation n'est pas actif tant que ce paramètre n'est pas défini. Vous pouvez définir les limites géographiques dans le constructeur ou après le constructeur.
Initialisez la vue cartographique.

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

Trajets à la demande

JavaScript

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

TypeScript

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

JavaScript

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

TypeScript

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 de localisation à l'aide de la fenêtre d'affichage de la carte

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

Trajets à la demande

JavaScript

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

TypeScript

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

JavaScript

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

TypeScript

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 cartographique

Une fois que vous avez créé le fournisseur de localisation, initialisez la vue cartographique de la même manière que pour le suivi d'un seul véhicule.

Après avoir chargé la bibliothèque JavaScript Journey Sharing, initialisez la vue cartographique et ajoutez-la à la page HTML. Votre page doit contenir un élément <div> qui servira à afficher la vue cartographique. L'élément <div> s'appelle 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 les événements et gérer les erreurs

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

Écouter les événements de modification

Vous pouvez récupérer des méta-informations sur la flotte à partir de l'objet véhicule en utilisant le fournisseur de localisation. Toute modification des métadonnées déclenche un événement update. Les méta-informations incluent des 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 ressources suivantes :

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

Trajets à la demande

JavaScript

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

TypeScript

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

JavaScript

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

TypeScript

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.

JavaScript

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

TypeScript

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, vous devez définir les limites du fournisseur de localisation sur "null", puis supprimer le fournisseur de la vue cartographique, comme décrit dans les sections suivantes.

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

Pour empêcher le fournisseur de localisation de suivre la flotte, définissez ses limites sur "null".

Trajets à la demande

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Tâches planifiées

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Supprimer le fournisseur de localisation de la vue cartographique

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Suivre un véhicule de livraison tout en affichant une flotte de livraison

Si vous utilisez les services de mobilité pour les tâches planifiées, vous pouvez afficher à la fois une flotte et l'itinéraire ainsi que les prochaines missions d'un véhicule de livraison spécifique, le tout dans la même vue cartographique. Pour ce faire, vous devez instancier un fournisseur de localisation pour la flotte de livraison et un fournisseur de localisation pour un véhicule de livraison, puis les ajouter tous les deux à la vue cartographique. Une fois instancié, le fournisseur de localisation 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 localisation :

JavaScript

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

TypeScript

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 d'un véhicule de livraison de suivre ce véhicule lorsque vous cliquez sur son repère dans la flotte, procédez comme suit :

Personnalisez un repère et ajoutez-lui une action au clic
Masquez le repère pour éviter les doublons.

Remarque : Le fournisseur de localisation de la flotte de livraison affiche un ensemble de repères, un pour chaque véhicule suivi. Si vous souhaitez afficher les détails d'un véhicule lorsque l'utilisateur clique dessus, vous devez instancier un fournisseur de localisation pour ce véhicule spécifique et définir son ID sur celui du véhicule sur lequel l'utilisateur a cliqué, comme indiqué dans l'exemple suivant. Cependant, dans ce cas, le fournisseur de localisation du véhicule de livraison affiche également un repère pour ce véhicule, ce qui prévu par sa conception. Vous devez donc masquer l'un d'eux pour qu'il n'y ait pas deux repères pour le même véhicule.

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

Personnaliser un repère et lui ajouter une action au clic

JavaScript

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

TypeScript

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

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

JavaScript

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

TypeScript

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

Afficher un parc Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Commencer à suivre la flotte

Instancier un fournisseur de localisation de flotte

Trajets à la demande

JavaScript

TypeScript

Tâches planifiées

JavaScript

TypeScript

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

Trajets à la demande

JavaScript

TypeScript

Tâches planifiées

JavaScript

TypeScript

Initialiser la vue cartographique

Trajets à la demande

JavaScript

TypeScript

Tâches planifiées

JavaScript

TypeScript

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

Écouter les événements de modification

Trajets à la demande

JavaScript

TypeScript

Tâches planifiées

JavaScript

TypeScript

Écouter les erreurs

JavaScript

TypeScript

Arrêter le suivi de la flotte

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

Trajets à la demande

JavaScript

TypeScript

Tâches planifiées

JavaScript

TypeScript

Supprimer le fournisseur de localisation de la vue cartographique

JavaScript

TypeScript

Suivre un véhicule de livraison tout en affichant une flotte de livraison

JavaScript

TypeScript

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

Personnaliser un repère et lui ajouter une action au clic

JavaScript

TypeScript

Masquer le repère pour éviter les doublons

JavaScript

TypeScript

Étape suivante

Afficher un parc