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

Suivre un envoi

Maintenant que vous avez configuré le SDK client JavaScript pour les tâches planifiées, prêt à suivre une livraison avec votre application grand public. Ce document aborde les en suivant les étapes clés de ce processus:

Initialiser une carte et afficher le parcours partagé
Mettre à jour et suivre la progression du parcours
Arrêter le partage du trajet
Gérer les erreurs

Configurer une carte

Pour suivre un retrait ou une livraison dans votre application Web, vous devez charger une carte et instanciez le SDK consommateur pour commencer à suivre la livraison. Vous pouvez charger soit créer une carte, soit utiliser une carte existante. Vous utiliserez ensuite le schéma pour instancier le SDK grand public afin que la vue de carte corresponde au l'emplacement de l'article suivi.

Charger une nouvelle carte à l'aide de l'API Google Maps JavaScript

Pour créer une carte, chargez l'API Google Maps JavaScript dans votre application Web. La l'exemple suivant montre comment charger l'API Google Maps JavaScript, activer SDK et déclencher le contrôle d'initialisation.

Le paramètre callback exécute la fonction initMap après le chargement de l'API.
L'attribut defer permet au navigateur de continuer à afficher le reste de vos pendant le chargement de l'API.

Utilisez la fonction initMap pour instancier le SDK Consumer SDK. Exemple :

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

Charger une carte existante

Vous pouvez également charger une carte existante créée par l'API Google Maps JavaScript, comme celui que vous utilisez déjà.

Par exemple, supposons que vous ayez une page Web avec un google.maps.Map standard entité sur laquelle un marqueur est affiché, comme défini dans le code HTML suivant. Ce affiche votre carte à l'aide de la même fonction initMap dans le rappel à la fin:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
        // Initialize and add the map
        function initMap() {
          // The location of Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // The map, initially centered at Mountain View, CA.
          var map = new google.maps.Map(document.getElementById('map'));
          map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

          // The marker, now positioned at Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * The callback parameter executes the initMap() function.
        -->
        <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

Instancier un fournisseur de lieux d'expédition

Utiliser le fournisseur de lieux de livraison, avec le jeton d'autorisation que vous avez défini précédemment, pour commencer à recevoir des données de Fleet Engine.

Ces exemples montrent comment instancier le fournisseur de localisation.

JavaScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

TypeScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

Afficher le parcours partagé

Pour que la carte affiche le trajet partagé, vous devez initialiser sa qui définit le cadre de la carte pour qu'il corresponde à l'emplacement suivi fourni par le SDK grand public après avoir obtenu les informations Fleet Engine.

Astuces :

Assurez-vous que votre page contient un élément <div> qui contient la vue plan. Dans l'exemple suivant, l'élément <div> est nommé map_canvas.
Par défaut, Fleet Engine applique les règles de visibilité en ligne. Vous pouvez aussi configurer des règles de visibilité pour les véhicules actifs l'expédition et les tâches d'arrêt planifiées. Consultez la section Personnaliser la visibilité des tâches dans la Configurer les tâches

Ces exemples montrent comment initialiser une vue de carte.

JavaScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
    // Any undefined styling options use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-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 wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

TypeScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
   // Any undefined styling options will use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts as soon as this is set.
  locationProvider.trackingId = 'your-tracking-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 wish.
  mapView.map.setCenter({lat: 37.2, lng: -121.9});
  mapView.map.setZoom(14);
}

Mettre à jour la progression de la livraison

Vous pouvez écouter les événements et mettre à jour la progression de l'expédition au fur et à mesure progresse. Utilisez le fournisseur de position pour récupérer les méta-informations à partir du taskTrackingInfo. Modifications apportées au méta informations déclenchent un événement update. L'objet taskTrackingInfo fournit les éléments suivants:

ETA
Nombre d'escales restantes
Distance restante avant le retrait ou la livraison

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

JavaScript

locationProvider.addListener('update', e => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

Afficher les critères pour plusieurs tâches

Le SDK grand public pour les tâches planifiées n'affiche qu'une seule tâche par ID de suivi sur sur la carte. Toutefois, en règle générale, un ID de suivi est attribué à un groupe d'annonces bien de livraison qui reste associé au bien tout au long de son parcours dans votre système. Cela signifie qu'un seul ID de suivi peut être associé plusieurs tâches, comme une tâche de retrait suivie d'une tâche de livraison pour le même un colis ou plusieurs tâches d'expédition ayant échoué pour un colis.

Pour gérer cette situation, Fleet Engine applique des critères pour l'affichage des tâches, comme indiqué dans le tableau suivant.

Critères de la tâche	Résultat
Ouvrir les tâches de retrait
Une seule réponse existe	Afficher la tâche
Plusieurs existent	Générer une erreur
Tâches de retrait en magasin fermées
Une seule réponse existe	Afficher la tâche
Plusieurs existent (certains avec des délais de résultat)	Afficher la tâche avec l'heure de résultat le plus récent
Plusieurs existent (aucun avec l'heure du résultat)	Générer une erreur
Ouvrir les tâches de livraison
Une seule réponse existe	Afficher la tâche
Plusieurs existent	Générer une erreur
Tâches de livraison terminées
Une seule réponse existe	Afficher la tâche
Plusieurs existent (certains avec des délais de résultat)	Afficher la tâche avec l'heure de résultat le plus récent
Plusieurs existent (aucun avec l'heure du résultat)	Générer une erreur

Arrêter de suivre un envoi

Lorsqu'un parcours d'expédition se termine ou est annulé, votre application grand public doit pour mettre fin au partage du trajet en supprimant l'ID de suivi et le fournisseur de localisation la vue plan.

Supprimer l'ID de suivi

Pour empêcher le fournisseur de services de localisation de suivre le colis, supprimez l'ID de suivi auprès du fournisseur de services de localisation. Les exemples suivants montrent comment procéder.

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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

Gérer les erreurs de suivi de livraison

Erreurs générées de manière asynchrone suite à la demande d'informations sur la livraison error. L'exemple suivant montre comment écouter ces événements 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);
});

Remarque:Veillez à encapsuler les appels de bibliothèque dans des blocs try...catch. pour gérer les erreurs imprévues.

Étape suivante

Appliquer un style à une carte