Suivre les expéditions avec la bibliothèque JavaScript Shipment Tracking Library

La bibliothèque JavaScript Shipment Tracking Library vous permet de visualiser l'emplacement de véhicules et de lieux d'intérêt suivis dans Fleet Engine. La bibliothèque contient un composant de carte JavaScript qui est un outil de remplacement prête à l'emploi ; pour qu'une entité google.maps.Map standard et des composants de données puissent se connecter avec Fleet Engine. Avec la bibliothèque JavaScript Shipment Tracking, vous pouvez proposer une expérience de suivi des colis animée et personnalisable à partir de votre application Web.

Composants

La bibliothèque JavaScript Shipment Tracking Library fournit des composants pour la visualisation du véhicule et de l'itinéraire vers sa destination, ainsi que les données brutes pour connaître l'heure d'arrivée prévue d'un conducteur ou la distance restante à parcourir.

Vue plan de suivi des livraisons

Le composant Vue plan permet de visualiser la position des véhicules et des destinations. Si l'itinéraire d'un véhicule est connu, le composant Vue de la carte s'anime au véhicule lorsqu'il se déplace sur sa trajectoire prédite.

Fournisseur de lieux de livraison

Un fournisseur de lieux de livraison fournit des informations sur l'emplacement des objets suivis dans la carte de suivi des expéditions pour le suivi des expéditions sur le premier et le dernier kilomètre.

Le fournisseur de lieux de livraison vous permet d'effectuer les opérations suivantes:

  • Lieu de retrait ou de livraison d'un colis.
  • L'emplacement et l'itinéraire du véhicule de livraison.

Objets de localisation suivis

Le fournisseur de localisation suit la position d'objets (véhicules, etc.) de destination.

Emplacement de la destination

La destination est le lieu où se termine le trajet. Pour livraison suivi, c'est l'emplacement de la tâche prévue.

Emplacement du véhicule

La position du véhicule correspond à sa position. Elle peut éventuellement inclure un itinéraire pour le véhicule.

Outil de récupération des jetons d'authentification

Pour contrôler l'accès aux données de localisation stockées dans Fleet Engine, vous devez implémenter un service de frappe de jetons Web JSON (JWT) pour Fleet Engine ; sur votre serveur. Ensuite, implémentez un outil de récupération de jetons d'authentification dans le cadre de votre application Web, à l'aide de la bibliothèque JavaScript de partage de parcours pour authentifier l'accès aux données de localisation.

Options de style

Les styles de marqueur et de polyligne déterminent l'apparence objets de localisation suivis sur la carte. Vous pouvez utiliser des options de style personnalisé pour modifier le style par défaut afin qu'il corresponde au style de votre application Web.

Contrôler la visibilité des lieux suivis

Cette section décrit les commandes de visibilité des objets suivis sur la carte. Ces règles s'appliquent à deux catégories d'objets:

  • Repère de position
  • Données de la tâche

Visibilité du repère de position

Tous les repères de position du point de départ et de la destination sont toujours affichés sur la carte. Par exemple, un lieu de livraison est toujours indiqué sur la carte, quel que soit l'état de la diffusion.

Visibilité des données de tâche

Cette section décrit les règles de visibilité par défaut qui s'appliquent aux données des tâches, telles que la position du véhicule et l'itinéraire restant. Vous pouvez personnaliser de nombreuses tâches, mais pas tous:

  • Tâches d'indisponibilité -- Vous ne pouvez pas personnaliser la visibilité de ces tâches.
  • Tâches actives du véhicule : vous pouvez personnaliser ces types de tâches.
  • Tâches liées aux véhicules inactifs : vous ne pouvez pas personnaliser la visibilité de ces tâches.

Tâches d'indisponibilité

S'il y a au moins une tâche d'indisponibilité (par exemple, si le conducteur fait une pause ou si le véhicule est en train de faire le plein) sur l'itinéraire à la tâche suivie, le véhicule n'est pas visible. L'heure d'arrivée estimée le temps et l'estimation du temps d'achèvement des tâches sont toujours disponibles.

Tâches liées à un véhicule actif

La TaskTrackingInfo fournit un certain nombre d'éléments de données pouvant être rendus visibles dans le Bibliothèque de suivi des expéditions. Par défaut, ces champs sont visibles lorsque la tâche est est attribué au véhicule et lorsque celui-ci se trouve à moins de cinq arrêts de la tâche. La la visibilité se termine lorsque la tâche est terminée ou annulée. Les champs sont sous la forme ce qui suit:

  • Polylignes d'itinéraire
  • Heure d'arrivée estimée
  • Temps d'exécution estimé de la tâche
  • Distance en voiture restante avant d'effectuer la tâche
  • Nombre d'arrêts restants
  • Emplacement du véhicule

Vous pouvez personnaliser la configuration de la visibilité pour chaque tâche en définissant la TaskTrackingViewConfig sur une tâche lors de sa création ou de sa mise à jour dans Fleet Engine. Cela crée de disponibilité des éléments de données individuels, qui peuvent être Critères suivants (appelés option de visibilité ci-dessous):

  • Nombre d'arrêts restants
  • Durée avant l'heure d'arrivée estimée
  • Distance de conduite restante
  • Toujours visible
  • Jamais visible

Notez que chaque élément de données ne peut être associé qu'à une seule option de visibilité. Il n'est pas possible de combiner des critères à l'aide des opérateurs OU et ET.

Voici un exemple de personnalisation. Les règles de cette personnalisation sont les suivantes:

  • Affiche les polylignes de l'itinéraire si le véhicule se trouve à moins de trois arrêts.
  • Afficher l'heure d'arrivée prévue si la distance restante est inférieure à 5 000 mètres.
  • Ne jamais afficher le nombre d'arrêts restants.
  • Chaque autre champ conserve la visibilité par défaut d'être affiché lorsque le le véhicule se trouve à moins de cinq arrêts de la tâche.
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Vous pouvez également personnaliser la configuration de la visibilité par défaut pour votre projet en contacter l'équipe d'assistance.

Polylignes d'itinéraire et règles de visibilité de la position des véhicules:

Lorsque les polylignes d'itinéraire sont visibles, la position du véhicule doit également être visible. Sinon, l'emplacement du véhicule peut être indiqué à la fin des polylignes. Cela signifie que l'option de visibilité des polylignes d'itinéraire ne peut pas être moins restrictive.

Ces règles doivent être respectées pour fournir des itinéraires / véhicules valides avec des polylignes d'itinéraire valides. Combinaison de la visibilité du lieu:

  • Lorsque les polylignes d'itinéraire et la position du véhicule ont la même option de visibilité type:

    • Si l'option de visibilité indique le nombre d'arrêts restants, la durée jusqu'à l'heure d'arrivée prévue, ou distance de conduite restante, les polylignes d'itinéraire doivent fournir une valeur inférieure supérieure ou égale à la valeur définie pour cette option de visibilité pour le véhicule l'emplacement. Voici un exemple:
    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingStopCountThreshold": 5
  },
}
    • Si l'option de visibilité d'une polyligne d'itinéraire est toujours visible, la position du véhicule doivent également fournir une option de visibilité toujours visible.
    • Si l'option de visibilité n'est jamais visible pour la position du véhicule, les polylignes d'itinéraire doit également fournir une option de visibilité jamais visible.

  • Lorsque les polylignes de l'itinéraire et la position du véhicule ont une option de visibilité différente la position du véhicule n'est visible que si les deux conditions de visibilité si toutes les options sont satisfaites.

    Voici un exemple:

    "taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingDrivingDistanceMetersThreshold": 3000
  },
}

    Dans cet exemple, la position du véhicule n'est visible que si l'arrêt restant est d'au moins 3 ET la distance de conduite restante est d'au moins 3 000 mètres.

Premiers pas avec la bibliothèque JavaScript de partage de parcours

Avant d'utiliser la bibliothèque JavaScript de partage de parcours, assurez-vous que : vous connaissez Fleet Engine et d'obtenir une clé API.

Pour suivre une livraison, commencez par créer une revendication de l'ID de suivi.

Créer une revendication d'ID de suivi

Pour suivre une livraison à l'aide du fournisseur de lieux de livraison : créer un jeton Web JSON (JWT) avec une revendication d'ID de suivi ;

Pour créer la charge utile JWT, ajoutez une revendication supplémentaire dans la section "Autorisation". à l'aide de la clé trackingid. Donnez-lui comme valeur l'ID de suivi de la livraison.

L'exemple suivant montre comment créer un jeton pour le suivi par ID de suivi:

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "trackingid": "tid_54321",
   }
}

Créer un outil de récupération de jetons d'authentification

Vous pouvez créer un outil de récupération des jetons d'authentification pour récupérer un jeton frappé avec les revendications appropriées sur vos serveurs via un service pour votre projet. Il est important de ne frapper que les jetons sur vos serveurs et de ne jamais partager vos certificats avec des clients. Sinon, vous risquez de compromettre la sécurité de votre système.

L'extracteur doit renvoyer une structure de données. avec deux champs inclus dans une promesse:

  • Une chaîne token.
  • Un nombre expiresInSeconds. Un jeton expire dans ce délai après la récupération.

La bibliothèque JavaScript Shipment Tracking demande un jeton via l'authentification jeton de récupération de jetons lorsque l'une des conditions suivantes est remplie:

  • Il ne possède pas de jeton valide, par exemple lorsqu'il n'a pas appelé l'extracteur sur un nouveau chargement de page ou lorsque l'outil d'extraction ne renvoie pas de jeton.
  • Le jeton récupéré précédemment a expiré.
  • Le jeton récupéré précédemment a expiré moins d'une minute.

Sinon, la bibliothèque utilise le jeton précédemment émis et toujours valide et et non à appeler l'outil d'extraction.

L'exemple suivant montre comment créer un outil de récupération de jetons d'authentification:

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

Lors de l'implémentation du point de terminaison côté serveur pour générer les jetons, conservez à l'esprit ce qui suit:

  • Le point de terminaison doit renvoyer un délai d'expiration pour le jeton. dans l'exemple ci-dessus, il est indiqué sous la forme data.ExpiresInSeconds.
  • L'outil de récupération de jetons d'authentification doit passer le délai d'expiration (en secondes, du moment de la récupération) à la bibliothèque, comme illustré dans l'exemple.
  • SERVER_TOKEN_URL dépend de la mise en œuvre de votre backend. Voici les URL du backend de l'exemple d'application: <ph type="x-smartling-placeholder">
      </ph>
    • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
    • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
    • https://SERVER_URL/token/fleet_reader

Charger une carte à partir d'un code HTML

L'exemple suivant montre comment charger le code JavaScript Shipment Tracking bibliothèque à partir d'une URL spécifiée. Le paramètre callback exécute la initMap après le chargement de l'API. L'attribut defer permet au navigateur le reste de la page pendant le chargement de l'API.

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

Suivre une livraison

Cette section explique comment utiliser la bibliothèque JavaScript Shipment Tracking pour suivre le retrait ou la livraison d'un colis. Veillez à Charger la bibliothèque à partir de la fonction de rappel spécifiée dans la balise de script avant d'exécuter votre code.

Instancier un fournisseur de lieux d'expédition

La bibliothèque JavaScript Shipment Tracking prédéfinit un fournisseur de localisation pour l'API Fleet Engine Deliveries. Utilisez l'ID de votre projet et une référence à votre fabrique de jetons pour l'instancier.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-id',
});

Initialiser la vue plan

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 &lt;div&gt; contenant la vue plan Dans l'exemple suivant, l'élément &lt;div&gt; s'appelle &lt;div&gt;.

Pour éviter les conditions de concurrence, définissez l'ID de suivi du fournisseur de localisation dans le rappel qui est appelé après l'initialisation de la carte.

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // 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 will start 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

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // 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 will start 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);

ID de suivi

L'ID de suivi fourni au fournisseur de services de localisation peut correspondre à plusieurs tâches ; (par exemple, une tâche de retrait et de livraison pour le même colis) ; plusieurs tentatives d'envoi infructueuses. Une tâche est sélectionnée pour être affichée carte de suivi des livraisons. La tâche à afficher est déterminée comme suit:

  1. Si une seule tâche de retrait en magasin est ouverte, elle s'affiche. Une erreur est générée. s'il y a plusieurs tâches de retrait en cours.
  2. S'il y a exactement une tâche de livraison ouverte, elle est affichée. Une erreur est générées s'il y a plusieurs tâches de livraison en cours.
  3. S'il y a des tâches de livraison terminées: <ph type="x-smartling-placeholder">
      </ph>
    • S'il y a exactement une tâche de livraison fermée, elle s'affiche.
    • S'il y a plusieurs tâches de livraison fermées, celle avec la plus récente et l'heure du résultat.
    • S’il y a plusieurs tâches de livraison fermées, aucune d’entre elles n’a de résultat une erreur est générée.
  4. S'il existe des tâches de retrait fermées: <ph type="x-smartling-placeholder">
      </ph>
    • S'il existe une seule tâche de retrait fermée, elle s'affiche.
    • S'il existe plusieurs tâches de retrait terminées, celle pour laquelle la plus récente et l'heure du résultat.
    • S'il y a plusieurs tâches de retrait fermées, aucune d'entre elles n'a de résultat une erreur est générée.
  5. Sinon, aucune tâche ne s'affiche.

Écouter les événements de modification

Vous pouvez récupérer des méta-informations sur une tâche à partir des informations de suivi des tâches à l'aide du fournisseur de localisation. Les méta-informations comprennent l'heure d'arrivée prévue, le nombre d'arrêts restants et la distance restante avant le retrait ou la livraison. Les modifications apportées aux méta-informations déclenchent un événement update. 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);
});

Gérer les erreurs

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 afin de 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.

Arrêter le 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.

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

Personnaliser l'apparence de la carte de base

Pour personnaliser l'apparence du composant "Cartes" : appliquer un style à votre carte à l'aide d'outils cloud ou en définissant des options directement dans le code.

Utiliser les styles de cartes basés dans le cloud

Styles de cartes basés dans le cloud vous permet de créer et de modifier des styles de carte pour toutes vos applications utilisant Google Maps depuis la console Google Cloud, sans avoir à modifier votre code. Les styles de carte sont enregistrés en tant qu'ID de carte dans votre projet Cloud. Pour appliquer un style à votre carte de suivi des livraisons JavaScript, spécifiez mapId lorsque vous créez le JourneySharingMapView. Impossible de modifier le champ mapId ou ajoutés après l'instanciation de JourneySharingMapView. Les éléments suivants : exemple montre comment activer un style de carte créé précédemment avec un ID de carte.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Utiliser des styles de cartes basés sur du code

Vous pouvez aussi personnaliser le style de carte mapOptions lorsque vous créer le JourneySharingMapView.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Utiliser la personnalisation des repères

Avec la bibliothèque JavaScript Shipment Tracking Library, vous pouvez personnaliser l'apparence et des repères que vous avez ajoutés à la carte. Pour ce faire, spécifiez un repère de livraison, que la bibliothèque de suivi des livraisons applique ensuite avant d'ajouter des repères sur la carte et à chaque mise à jour des repères.

La personnalisation la plus simple consiste à spécifier MarkerOptions qui sera appliqué à tous les repères du même type. Les changements spécifiés dans l'objet sont appliqués après la création de chaque repère, en remplaçant les options par défaut.

Une option plus avancée consiste à spécifier une fonction de personnalisation. Personnalisation permettent de styliser les repères en fonction des données et d'ajouter avec les repères, comme la gestion des clics. Plus précisément, Expédition Le suivi transmet à la fonction de personnalisation les données relatives au type d'objet Le repère représente le véhicule ou la destination. Cela permet ensuite au style des repères changer en fonction de l'état actuel de l'élément de repère lui-même ; par exemple, nombre d'escales prévues restantes avant d'atteindre la destination. Vous pouvez même rejoindre par rapport à des données provenant de sources externes à Fleet Engine et appliquez un style au repère ces informations.

La bibliothèque de suivi des livraisons fournit les paramètres de personnalisation suivants dans FleetEngineShipmentLocationProviderOptions:

Modifier le style des repères à l'aide de MarkerOptions

L'exemple suivant montre comment configurer le style d'un repère de véhicule avec un objet MarkerOptions. Suivez ce modèle pour personnaliser le style repère à l'aide de l'une des personnalisations indiquées ci-dessus.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Modifier le style des repères à l'aide de fonctions de personnalisation

L'exemple suivant montre comment configurer le style d'un repère de véhicule. Suivre ce motif pour personnaliser le style de n'importe quel repère en utilisant l'un des repères les paramètres de personnalisation répertoriés ci-dessus.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

Ajouter la gestion des clics aux repères

L'exemple suivant montre comment ajouter la gestion des clics à un repère de véhicule. Suivez cette procédure pour ajouter la gestion des clics à n'importe quel repère utilisant l'un de ces repères. les paramètres de personnalisation répertoriés ci-dessus.

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Utiliser des personnalisations de polylignes

La bibliothèque de suivi des expéditions vous permet également de personnaliser l'apparence l'itinéraire de la livraison sur la carte. La bibliothèque crée google.maps.Polyline correspondant à chaque paire de coordonnées dans la ligne active ou restante path. Vous pouvez styliser les objets Polyline en spécifiant des personnalisations de polyligne. La applique ensuite ces personnalisations dans deux situations: avant d'ajouter la classe objets à la carte, et quand les données utilisées pour ces objets ont changé.

Comme pour la personnalisation des repères, vous pouvez spécifier un ensemble PolylineOptions à appliquer à tous les objets Polyline correspondants lors de leur création ou mis à jour.

De même, vous pouvez spécifier une fonction de personnalisation. Fonctions de personnalisation permettent d'appliquer un style individuel aux objets en fonction des données envoyées par Fleet Engine. La fonction peut modifier le style de chaque objet en fonction de l'état actuel la livraison ; (par exemple, en attribuant une nuance plus profonde à l'objet Polyline) ; ce qui le rend plus épais lorsque le véhicule est plus lent. Vous pouvez même vous joindre à provenant de sources extérieures à Fleet Engine et appliquez un style à l'objet Polyline en fonction des informations.

Vous pouvez spécifier les personnalisations à l'aide des paramètres fournis dans FleetEngineShipmentLocationProviderOptions Vous pouvez définir des personnalisations pour différents états de chemin dans les (j'ai déjà voyagé, en voyage actif ou je n'ai pas encore voyagé). La sont les suivants:

Modifier le style des objets Polyline à l'aide de PolylineOptions

L'exemple suivant montre comment configurer le style d'un objet Polyline avec PolylineOptions Suivez ce schéma pour personnaliser le style de n'importe quel objet Polyline à l'aide des des personnalisations de polyligne listées précédemment.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Modifier le style des objets Polyline à l'aide de fonctions de personnalisation

L'exemple suivant montre comment configurer un objet Polyline actif stylisation. Suivez ce modèle pour personnaliser le style de n'importe quel objet Polyline. en utilisant l'un des paramètres de personnalisation de polyligne listés précédemment.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Contrôler la visibilité des objets Polyline

Par défaut, tous les objets Polyline sont visibles. Créer un objet Polyline invisible, définissez visible :

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Afficher un InfoWindow pour un véhicule ou un repère de position

Vous pouvez utiliser un InfoWindow pour afficher des informations supplémentaires sur un véhicule ou un repère de position.

L'exemple suivant montre comment créer une InfoWindow et l'associer à un repère de véhicule:

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Désactiver l'ajustement automatique

Vous pouvez empêcher la carte d'ajuster automatiquement la fenêtre d'affichage au véhicule et prévu en désactivant l'ajustement automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez le partage du parcours la vue plan.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.   
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

Remplacer une carte existante

Vous pouvez utiliser la bibliothèque JavaScript Shipment Tracking Library pour remplacer Une carte existante contenant des repères ou d'autres éléments de personnalisation sans perdre ces personnalisations.

Par exemple, supposons que l'une de vos pages Web comporte un google.maps.Map standard entité sur laquelle un repère est affiché:

<!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 Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // 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 Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * 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>

Pour ajouter la bibliothèque JavaScript de partage de parcours:

  1. Ajoutez du code pour la fabrique de jetons d'authentification.
  2. Initialisez un fournisseur de localisation dans la fonction initMap().
  3. Initialisez la vue de la carte dans la fonction initMap(). La vue contient la carte.
  4. Déplacez votre personnalisation dans la fonction de rappel pour l'initialisation de la vue de carte.
  5. Ajoutez la bibliothèque d'emplacements au chargeur d'API.

L'exemple suivant montre les modifications à apporter:

<!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>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

  locationProvider.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };

    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

Si vous suivez un colis avec le paramètre spécifié près d'Uluru, il sera affiché sur la carte.