Afficher un parc

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

Ce document aborde les opérations suivantes que vous pouvez effectuer lorsque vous affichez un parc:

1. Commencez à suivre le parc.
2. Écouter les événements et gérer les erreurs
3. Arrêter le suivi :
4. Suivre un véhicule spécifique lorsque vous consultez un parc

Commencer à suivre la flotte

Pour suivre un parc, vous devez instancier un fournisseur de localisation du parc et définissez des restrictions d'emplacement pour la fenêtre d'affichage de la carte, comme décrit ci-dessous .

Instancier un fournisseur de localisation du parc

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

Pour l'instancier, procédez comme suit:

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

2. Utiliser une requête de filtre de véhicule : cette requête permet de définir les éléments suivants : 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 examinez ListDeliveryVehiclesRequest.filter

3. Définissez les limites pour l'affichage du véhicule. Utilisez locationRestriction pour limiter la zone d'affichage des véhicules sur la carte. Le lieu Le fournisseur n'est pas actif tant que ce paramètre n'est pas défini. Vous pouvez définir des limites d'emplacement soit dans le constructeur ou après celui-ci.

4. Initialisez la vue plan.

Les exemples suivants montrent comment instancier un fournisseur de localisation de parc pour à la demande et pour des scénarios de tâches planifiées. Cet exemple montre également comment utiliser locationRestriction dans le constructeur pour que le fournisseur de localisation soit actif.

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 la classe locationProvider.locationRestriction dans votre code en tant que comme illustré dans l'exemple JavaScript suivant.

Remarque :Cet exemple concerne les tâches planifiées, mais pour les trajets à la demande, il suffit d'utiliser google.maps.journeySharing.FleetEngineFleetLocationProvider à la place.

   // 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 aussi définir des limites de locationRestriction pour qu'elles correspondent à la zone actuelle visible sur la carte.

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 que vous avez créé le fournisseur de localisation, initialisez la vue plan dans le même comme vous le faites lorsque vous suivez un seul véhicule.

Après avoir chargé la bibliothèque JavaScript de partage de parcours, initialisez la vue plan et de l'ajouter à la page HTML. Votre page doit contenir Un élément <div> contenant la vue plan Élément <div> est nommée 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 le parc, vous devez écouter les modifications d'événements et traiter les erreurs qui surviennent, 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 "vehicle" à l'aide de le fournisseur de services de localisation. Les modifications apportées aux méta-informations déclenchent une mise à jour . Les méta-informations incluent les propriétés du véhicule telles que la navigation l'état, la distance restante et les attributs personnalisés.

Pour en savoir plus, consultez les ressources suivantes:

• Liste des options pour les trajets à la demande
• Liste des options du véhicule pour les tâches planifiées

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 véhicule. Erreurs générées de manière asynchrone lors de la demande de véhicule les informations déclenchent des événements d'erreur.

L'exemple suivant montre comment écouter pour 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 de suivre la flotte

Pour arrêter de suivre le parc, définissez les limites du fournisseur de localisation sur "null", puis supprimez le fournisseur de localisation de la vue plan, comme décrit dans les 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 les limites du fournisseur de localisation 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 plan

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

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 tous les deux 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 emplacement de parc de livraison et un fournisseur de localisation des véhicules de livraison, puis ajoutez-les tous les deux à la carte vue. 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 du véhicule de livraison de suivre un véhicule de livraison lorsque vous cliquez sur le repère de son parc, procédez comme suit:

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

2. 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 sur ce véhicule, vous instanciez l'emplacement d'un véhicule de livraison fournisseur, et définissez l'ID du véhicule sur celui sur lequel l'utilisateur a cliqué, comme indiqué ci-dessous. dans l'exemple suivant. Dans ce cas, le véhicule de livraison Le fournisseur de localisation affiche également un repère pour ce véhicule (car il est conçu ce qu'il faut faire). Vous masquez l'un d'eux afin qu'il n'y ait pas deux marqueurs 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 doublons

Masquer le repère auprès du fournisseur de localisation du véhicule de livraison pour empêcher le rendu 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