Suivez votre parc avec la bibliothèque de suivi du parc JavaScript

La bibliothèque JavaScript Fleet Tracking Library vous permet de visualiser l'emplacement des véhicules de vos flottes en temps quasi réel. La bibliothèque utilise l'API On Demand Rides and Deliveries pour permettre la visualisation des véhicules et des trajets. La bibliothèque de suivi de parc JavaScript contient un composant de carte JavaScript qui remplace une entité google.maps.Map standard et des composants de données pour se connecter à Fleet Engine.

Composants

La bibliothèque JavaScript de suivi du parc fournit des composants permettant de visualiser les véhicules et les points de cheminement des trajets, ainsi que des flux de données brutes pour l'heure d'arrivée prévue ou la distance restante avant un trajet.

Vue plan Fleet Tracking

Le composant de vue de carte de suivi du parc permet de visualiser l'emplacement des véhicules et les points de cheminement des trajets. Si l'itinéraire d'un véhicule est connu, le composant de vue plan anime ce véhicule à mesure qu'il se déplace sur la voie prévue.

Exemple de vue de carte de suivi de flotte

Fournisseurs de géolocalisation

Les fournisseurs de services de localisation utilisent les informations stockées dans Fleet Engine pour envoyer des informations de localisation des objets suivis dans la carte de partage de parcours.

Fournisseur de services de localisation de véhicules

Le fournisseur de localisation des véhicules affiche les informations de localisation d'un seul véhicule. Il contient des informations sur l'emplacement du véhicule et le trajet en cours qui lui est attribué.

Fournisseur de services de localisation de parc

Le fournisseur de localisation de la flotte affiche les informations de localisation de plusieurs véhicules. Vous pouvez appliquer un filtre pour afficher un véhicule spécifique et sa localisation, ou afficher la position des véhicules pour l'ensemble du parc.

Contrôler la visibilité des lieux suivis

Les règles de visibilité déterminent quand un objet de localisation suivi est visible sur la carte pour un fournisseur de services de localisation Fleet Engine. Remarque : L'utilisation d'un fournisseur de localisation personnalisé ou dérivé peut modifier les règles de visibilité.

Véhicules

Un véhicule est visible dès qu'il est créé dans Fleet Engine, ainsi que lorsque le champ "vehicle_state" est défini sur Online. Cela signifie qu'un véhicule peut être visible même si aucun trajet en cours n'est attribué au véhicule.

Repères d'emplacement des points de cheminement

Un repère de position de point de cheminement indique les points du parcours d'un véhicule, à partir du point de départ et jusqu'à la destination finale. Les repères de position des points de cheminement peuvent être définis comme suit:

  • Origine : indique le lieu de départ du trajet du véhicule.
  • Intermédiaire : indique les arrêts pour le trajet du véhicule
  • Destination : indique le lieu final du trajet du véhicule.

Les points de cheminement planifiés des véhicules sont affichés sur la carte en tant que repères de départ, intermédiaires et de destination.

Premiers pas avec la bibliothèque de suivi de parc JavaScript

Avant d'utiliser la bibliothèque de suivi de parc JavaScript, assurez-vous de bien utiliser Fleet Engine et d'obtenir une clé API. Créez ensuite un ID de trajet et une revendication d'ID de véhicule.

Créer une revendication pour un ID de trajet et un ID de véhicule

Pour suivre les véhicules à l'aide du fournisseur de localisation des véhicules, créez un jeton Web JSON (JWT) avec un ID de trajet et une revendication d'ID de véhicule.

Pour créer la charge utile JWT, ajoutez une revendication supplémentaire dans la section des autorisations avec les clés tripid et vehicleid, puis définissez le value de chaque clé sur *. Le jeton doit être créé à l'aide du rôle Cloud IAM Super-utilisateur du service Fleet Engine. Notez que cela accorde un accès étendu pour créer, lire et modifier des entités Fleet Engine, et ne doit être partagé qu'avec des utilisateurs de confiance.

L'exemple suivant montre comment créer un jeton pour le suivi par véhicule et par tâche:

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

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

La bibliothèque de suivi de parc JavaScript demande un jeton à l'aide de l'outil de récupération de jetons d'authentification lorsque l'une des conditions suivantes est remplie:

  • Il ne possède pas de jeton valide, par exemple s'il n'a pas appelé l'extracteur lors d'un nouveau chargement de page ou s'il n'a pas renvoyé de jeton.
  • Le jeton précédemment récupéré a expiré.
  • Le jeton récupéré précédemment est dans la minute qui suit l'expiration.

Sinon, la bibliothèque utilise le jeton toujours valide émis précédemment et n'appelle pas l'extracteur.

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

L'extracteur doit renvoyer une structure de données comportant deux champs, encapsulés dans une promesse:

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

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 la génération des jetons, tenez compte des points suivants:

  • Le point de terminaison doit renvoyer un délai d'expiration pour le jeton. Dans l'exemple ci-dessus, il est exprimé sous la forme data.ExpiresInSeconds.
  • L'outil de récupération des jetons d'authentification doit transmettre le délai d'expiration (en secondes, à compter de la récupération) à la bibliothèque, comme illustré dans l'exemple.
  • La valeur SERVER_TOKEN_URL dépend de la mise en œuvre de votre backend. Voici des exemples d'URL :
    • https://SERVER_URL/token/driver/VEHICLE_ID
    • https://SERVER_URL/token/consumer/TRIP_ID
    • https://SERVER_URL/token/fleet_reader

Charger une carte à partir d'un fichier HTML

L'exemple suivant montre comment charger la bibliothèque de partage de parcours JavaScript à partir d'une URL spécifiée. Le paramètre de rappel exécute la fonction initMap après le chargement de l'API. L'attribut defer permet au navigateur de continuer à afficher le reste de votre page pendant le chargement de l'API.

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

Suivre un véhicule

Cette section explique comment utiliser la bibliothèque JavaScript Fleet Tracking Library pour suivre un véhicule. Veillez à charger la bibliothèque à partir de la fonction de rappel spécifiée dans le tag de script avant d'exécuter votre code.

Instancier un fournisseur de localisation de véhicules

La bibliothèque de suivi de parc JavaScript prédéfinit un fournisseur de localisation pour l'API On Demand Rides and Deliveries. Utilisez votre ID de projet et une référence à votre fabrique de jetons pour l'instancier.

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

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

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineVehicleLocationProvider({
          projectId,
          authTokenFetcher,

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

Initialiser la vue plan

Après avoir chargé la bibliothèque de partage de parcours JavaScript, initialisez la vue de la carte et ajoutez-la à la page HTML. Votre page doit contenir un élément <div> qui contient la vue plan. L'élément <div> est nommé map_canvas dans l'exemple ci-dessous.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 wish.
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],
  // Styling customizations; see below.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

Écouter les événements de modification

Vous pouvez récupérer des méta-informations sur un véhicule à partir de l'objet vehicle à l'aide du fournisseur de localisation. Ces méta-informations incluent l'heure d'arrivée prévue et la distance restante avant le prochain retrait ou dépose du véhicule. Les modifications apportées aux métadonnées déclenchent un événement update. L'exemple suivant montre comment écouter ces événements de modification.

JavaScript

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

TypeScript

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

Écouter les erreurs

Les erreurs survenant 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 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 le suivi

Pour empêcher le fournisseur de localisation de suivre le véhicule, supprimez l'ID du véhicule du fournisseur de localisation.

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Supprimer le fournisseur de position de la vue plan

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Afficher un parc de véhicules

Cette section explique comment utiliser la bibliothèque de partage de parcours JavaScript pour afficher un parc de véhicules. Veillez à charger la bibliothèque à partir de la fonction de rappel spécifiée dans le tag de script avant d'exécuter votre code.

Instancier un fournisseur de localisation de parc de véhicules

La bibliothèque JavaScript Fleet Tracking Library permet de définir un fournisseur de localisation qui extrait plusieurs véhicules à partir de l'API On Demand Rides and Deliveries. Utilisez votre ID de projet ainsi qu'une référence à votre outil de récupération de jetons pour l'instancier.

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

vehicleFilter spécifie une requête permettant de filtrer les véhicules affichés sur la carte. Ce filtre est transmis directement à Fleet Engine. Consultez ListVehiclesRequest pour connaître les formats acceptés.

locationRestriction limite la zone dans laquelle les véhicules doivent être affichés sur la carte. Elle détermine également si le suivi de la position est activé ou non. Le suivi de la position ne démarre pas tant que cette option n'est pas configurée.

Une fois le fournisseur de localisation créé, initialisez la vue de la carte.

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

Les limites de locationRestriction peuvent être configurées pour correspondre à la zone visible dans la vue plan.

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

Écouter les événements de modification

Vous pouvez récupérer des méta-informations sur le parc à partir de l'objet vehicles à l'aide du fournisseur de localisation. Ces méta-informations incluent les propriétés du véhicule, telles que l'état de la navigation, la distance jusqu'au prochain point de cheminement et les attributs personnalisés. Pour en savoir plus, consultez la documentation de référence. La modification des métadonnées déclenche un événement de mise à jour. L'exemple suivant montre comment écouter ces événements de modification.

JavaScript

locationProvider.addListener('update', e => {
  // 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);
    }
  }
});

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

Écouter les erreurs

Les erreurs survenant de manière asynchrone lors de la demande d'informations sur le parc de véhicules déclenchent des événements d'erreur. Pour obtenir des exemples montrant comment écouter ces événements, consultez la section Écouter les erreurs.

Arrêter le suivi

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

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Supprimer le fournisseur de position de la vue plan

L'exemple suivant montre comment supprimer un fournisseur de services 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 de carte, appliquez 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

Les styles de cartes basés dans le cloud vous permettent de créer et de modifier des styles de carte pour toutes les applications qui utilisent Google Maps à partir de 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 de parc JavaScript, spécifiez un mapId lorsque vous créez le JourneySharingMapView. Le champ mapId ne peut pas être modifié ni ajouté après l'instanciation de l'JourneySharingMapView. L'exemple suivant 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'
  }
});

TypeScript

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

Utiliser les styles de carte basés sur du code

Une autre façon de personnaliser le style de la carte consiste à définir mapOptions lorsque vous créez 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 les personnalisations de repère

Avec la bibliothèque JavaScript de suivi de parc, vous pouvez personnaliser l'apparence des repères ajoutés à la carte. Pour ce faire, spécifiez des personnalisations de repère, que la bibliothèque de suivi de parc applique ensuite avant d'ajouter des repères à la carte et à chaque mise à jour de repère.

Vous pouvez créer une personnalisation simple en spécifiant un objet MarkerOptions à appliquer à tous les repères du même type. Les modifications spécifiées dans l'objet sont appliquées après la création de chaque repère, écrasant ainsi les options par défaut.

Comme option plus avancée, vous pouvez spécifier une fonction de personnalisation. Les fonctions de personnalisation permettent de styliser les repères en fonction de données et d'ajouter de l'interactivité aux repères, comme la gestion des clics. Plus précisément, le suivi du parc transmet à la fonction de personnalisation des données sur le type d'objet représenté par le repère: véhicule, arrêt ou tâche. Cela permet ensuite de modifier le style du repère en fonction de l'état actuel de l'élément de repère lui-même (par exemple, le nombre d'arrêts restants ou le type de tâche). Vous pouvez même effectuer une jointure avec des données provenant de sources extérieures à Fleet Engine et styliser le repère en fonction de ces informations.

Vous pouvez également utiliser des fonctions de personnalisation pour filtrer la visibilité des repères. Pour ce faire, appelez setVisible(false) sur le repère.

Toutefois, pour des raisons de performances, nous vous recommandons de filtrer avec le filtrage natif au niveau du fournisseur de localisation, tel que FleetEngineFleetLocationProvider.vehicleFilter. Cela dit, lorsque vous avez besoin de fonctionnalités de filtrage supplémentaires, vous pouvez appliquer un filtrage à l'aide de la fonction de personnalisation.

La bibliothèque de suivi de parc fournit les paramètres de personnalisation suivants:

Modifier le style des repères avec 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 d'un repère à l'aide de l'un des paramètres de personnalisation indiqués ci-dessus.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

L'exemple suivant montre comment configurer le style d'un repère de véhicule. Suivez ce modèle pour personnaliser le style d'un repère à l'aide de l'un des paramètres de personnalisation de repère répertoriés ci-dessus.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

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 ce modèle pour ajouter la gestion des clics à n'importe quel repère à l'aide de l'un des paramètres de personnalisation de repère répertoriés ci-dessus.

JavaScript

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

TypeScript

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

Filtrer les repères visibles

L'exemple suivant montre comment filtrer les repères de véhicules visibles. Suivez cette procédure pour filtrer les repères à l'aide de l'un des paramètres de personnalisation des repères répertoriés ci-dessus.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Utiliser les personnalisations de polylignes lorsque vous suivez un véhicule

Avec la bibliothèque de suivi du parc, vous pouvez également personnaliser l'apparence de l'itinéraire du véhicule suivi sur la carte. La bibliothèque crée un objet google.maps.Polyline pour chaque paire de coordonnées dans le trajet actif ou restant du véhicule. Vous pouvez appliquer un style aux objets Polyline en personnalisant les polylignes. La bibliothèque applique ensuite ces personnalisations dans deux situations: avant d'ajouter les objets à la carte et lorsque les données utilisées pour les objets ont changé.

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

De même, vous pouvez spécifier une fonction de personnalisation. Les 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 du véhicule (par exemple, en colorant l'objet Polyline d'une nuance plus profonde ou en l'épaississant lorsque le véhicule ralentit). Vous pouvez même effectuer une jointure depuis des sources extérieures à Fleet Engine et styliser l'objet Polyline en fonction de ces informations.

Vous pouvez spécifier les personnalisations à l'aide des paramètres fournis dans FleetEngineVehicleLocationProviderOptions. Vous pouvez personnaliser les différents états du trajet du véhicule (déjà emprunté, en cours de route ou pas encore). Les paramètres 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 modèle pour personnaliser le style de n'importe quel objet Polyline à l'aide de l'une des personnalisations de polylignes répertorié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 le style d'un objet Polyline actif. Suivez ce modèle pour personnaliser le style de n'importe quel objet Polyline à l'aide de l'un des paramètres de personnalisation de polyligne énumérés précédemment.

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    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: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    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. Pour rendre un objet Polyline invisible, définissez sa propriété visible:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Afficher les objets Polyline sensibles au trafic

Fleet Engine renvoie des données sur la vitesse du trafic pour les trajets actifs et restants du véhicule suivi. Vous pouvez utiliser ces informations pour appliquer un style aux objets Polyline en fonction de leurs vitesses de trafic:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Afficher une 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 un InfoWindow et l'associer à un repère de véhicule.

JavaScript

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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 à l'itinéraire anticipé en désactivant l'ajustement automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez la vue de la carte de partage de trajets.

JavaScript

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

TypeScript

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

Remplacer une carte existante

Vous pouvez remplacer une carte existante qui inclut des repères ou d'autres personnalisations sans les perdre.

Par exemple, supposons que vous ayez une page Web avec une entité google.maps.Map standard 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 Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // 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 Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, 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 de partage de parcours JavaScript, qui inclut le suivi de parc:

  1. Ajoutez le code de la fabrique de jetons d'authentification.
  2. Initialisez un fournisseur de localisation dans la fonction initMap().
  3. Initialisez la vue plan 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 la carte.
  5. Ajoutez la bibliothèque de localisation 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. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          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
        });

      mapView.addListener('ready', () => {
        locationProvider.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // 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 Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, 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, which includes Fleet Tracking functionality.
    -->
    <script
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
    ></script>
  </body>
</html>

Si vous conduisez un véhicule avec l'ID spécifié près d'Oracle Park, il s'affichera sur la carte.