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

Afficher un parc

Cette section explique comment utiliser la bibliothèque de suivi de parc JavaScript pour afficher un parc. 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 opérations suivantes que vous pouvez effectuer lorsque vous consultez un parc:

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

Commencer à suivre la flotte

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

Instancier un fournisseur de position de parc

La bibliothèque JavaScript de suivi du parc inclut un fournisseur de localisation qui extrait plusieurs véhicules à partir de Fleet Engine.

Pour l'instancier, procédez comme suit:

Utilisez votre ID de projet ainsi qu'une référence à votre outil de récupération de jetons.
Utiliser une requête de filtre de véhicule : cette requête contrôle les véhicules affichés par 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 examinez ListDeliveryVehiclesRequest.filter
Définissez les limites 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.
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.

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 géographique à 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.

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 plan

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

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 le parc, vous devez écouter les modifications d'événements et gérer les erreurs qui se produisent, comme décrit dans les sections suivantes.

Écouter les événements de modification

Vous pouvez récupérer des méta-informations sur le parc à partir de l'objet "Véhicule" à l'aide du fournisseur de localisation. 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 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 suite à 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, 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

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Tâches planifiées

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Supprimer le fournisseur de position de la vue cartographique

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Suivez un véhicule de livraison et consultez une flotte

Si vous utilisez les services Mobility pour des tâches planifiées, vous pouvez à la fois afficher un parc et afficher l'itinéraire et les tâches à venir d'un véhicule de livraison spécifique dans la même vue plan. 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 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 autoriser le fournisseur de localisation de véhicules de livraison à suivre un véhicule de livraison lorsque vous cliquez sur son repère de parc, procédez comme suit:

Personnalisez un repère et ajoutez une action de clic.
Masquer le repère pour éviter les repères en double

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, instanciez un fournisseur de localisation de véhicule de livraison et définissez l'ID du véhicule sur celui sur lequel l'utilisateur a cliqué, comme illustré dans l'exemple suivant. Toutefois, lorsque vous effectuez cette opération, le fournisseur de localisation du véhicule de livraison affiche également un repère pour ce véhicule (conformément à sa conception). Vous en masquez donc un pour qu'il n'y ait pas deux repères pour le même véhicule.

Vous trouverez des exemples de ces étapes dans les sections suivantes.

Personnaliser un repère et ajouter une action de 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 repères en double

Masquez le repère auprès du fournisseur de localisation du véhicule de livraison afin d'é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