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

La bibliothèque JavaScript de suivi de flotte permet de visualiser les emplacements les véhicules de vos parcs, en temps quasi réel. La bibliothèque utilise l'API On Demand Courses et livraisons API pour permettre la visualisation des véhicules et des trajets. La flotte JavaScript La bibliothèque de suivi contient un composant de carte JavaScript qui est une fonctionnalité de dépôt remplacer une entité google.maps.Map standard et des composants de données pour se connectent à Fleet Engine.

Composants

La bibliothèque JavaScript Fleet Tracking Library fournit des composants pour la visualisation de les véhicules et points de cheminement du trajet, ainsi que les flux de données brutes pour l'heure d'arrivée prévue la distance d'un trajet.

Vue Plan du suivi de flotte

Le composant de carte de suivi de flotte permet de visualiser la position des véhicules et les points de cheminement du trajet. Si l'itinéraire d'un véhicule est connu, le composant "Vue plan" anime ce véhicule à mesure qu'il se déplace sur sa trajectoire prédite.

Vue Plan du suivi de flotte exemple

Fournisseurs de services de localisation

Les fournisseurs de localisation utilisent les informations stockées dans Fleet Engine pour envoyer des données de localisation des informations sur les objets suivis dans la carte de partage du trajet.

Fournisseur de localisation des véhicules

Le fournisseur de localisation du véhicule affiche les informations de localisation d'un seul véhicule. Il contient des informations sur la position du véhicule et le trajet en cours attribué au véhicule.

Fournisseur de localisation du parc

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

Contrôler la visibilité des lieux suivis

Les règles de visibilité déterminent à quel moment un objet "Lieu suivi" est visible sur la carte pour un fournisseur de localisation Fleet Engine. Remarque : Utilisation d'un emplacement personnalisé ou dérivé peut modifier les règles de visibilité.

Véhicules

Un véhicule est visible dès sa création dans Fleet Engine. Lorsque l'état du véhicule est Online. Cela signifie qu'un véhicule peut être visible même si aucun trajet n'est actuellement attribué au véhicule.

Repères de position des points de cheminement

Le repère de position d'un point de cheminement indique les points de départ du trajet d'un véhicule. avec le point de départ et la destination finale. La position du point de cheminement Les repères peuvent être définis comme suit:

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

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

Premiers pas avec la bibliothèque JavaScript Fleet Tracking

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

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

Pour suivre les véhicules à l'aide de la position du véhicule provider, créez un jeton Web JSON (JWT) avec un trajet Revendication d'identifiant de véhicule ou d'identité

Pour créer la charge utile JWT, ajoutez une revendication supplémentaire dans la section "Autorisation". 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 de super-utilisateur du service Parc Engine Cloud rôle IAM. Notez que cela accorde un accès étendu pour créer, lire et modifier un parc et ne doivent être partagées qu'avec des utilisateurs de confiance.

L'exemple suivant montre comment créer un jeton pour le suivi par véhicule et 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 de jetons d'authentification

La bibliothèque JavaScript de suivi de flotte demande un jeton à l'aide de 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.

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 compte de service pour votre projet. Il est important de ne créer des jetons que sur votre des serveurs et de ne jamais partager vos certificats sur des clients. Sinon, vous pouvez compromettre la sécurité de votre système.

L'extracteur doit renvoyer un objet data structure 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.

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 des jetons d'authentification doit passer le délai d'expiration (en secondes, l'heure de récupération) à la bibliothèque, comme illustré dans l'exemple.
  • SERVER_TOKEN_URL dépend de l'implémentation de votre backend. Il s'agit 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 code HTML

L'exemple suivant montre comment charger la bibliothèque JavaScript de partage de parcours à partir d'une URL spécifiée. Le paramètre callback exécute la fonction initMap. après le chargement de l'API. L'attribut defer permet au navigateur de continuer l'affichage. 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&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 JavaScript Fleet Tracking Library prédéfinit un fournisseur de localisation pour l'état API Demand Rides and Deliveries. Utilisez l'ID de votre projet et une référence à votre 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 JavaScript de partage de parcours, initialisez la vue de la carte et l'ajouter à la page HTML. Votre page doit contenir un élément &lt;div&gt; qui contient la vue plan. L'élément &lt;div&gt; est nommé &lt;div&gt; dans 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 services de localisation. Les méta-informations incluent l'heure d'arrivée prévue et le temps restant de la distance avant la prochaine prise en charge ou le prochain dépôt du véhicule. Modifications apportées au 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.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

Erreurs générées de manière asynchrone lors de la demande d'un déclencheur d'informations sur le véhicule les événements d'erreur. L'exemple suivant montre comment écouter ces événements dans 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 auprès du fournisseur de services de localisation.

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

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

Afficher un parc de véhicules

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

Instancier un fournisseur de localisation du parc de véhicules

La bibliothèque JavaScript Fleet Tracking Library définit un fournisseur de localisation récupère plusieurs véhicules à partir de l'API On Demand Rides and Deliveries. Utilisez votre l'ID du 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 utilisée pour filtrer les véhicules affichés sur la carte. Ce filtre est transmis directement à Fleet Engine. Voir ListVehiclesRequest pour connaître les formats acceptés.

locationRestriction limite la zone dans laquelle afficher les véhicules sur la carte. Elle contrôle également si le suivi de la position est actif ou non. Suivi de la position ne démarrera pas tant que ce paramètre ne sera pas défini.

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

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

Les limites 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 services de localisation. Les méta-informations incluent les propriétés du véhicule comme l'état de la navigation, la distance jusqu'au prochain point de cheminement et des attributs personnalisés ; voir référence documentation pour en savoir plus. La modification du paramètre de méta-informations déclenche un événement de mise à jour. La 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

Erreurs générées de manière asynchrone lors de la demande d'informations sur le parc de véhicules déclencher des événements d'erreur. Pour obtenir des exemples montrant comment écouter ces événements, consultez sélectionnez Écouter les erreurs.

Arrêter le suivi

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

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

Personnaliser l'apparence de la carte de base

Pour personnaliser l'apparence du composant Google Maps, appliquez un style à votre carte à l'aide de à 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. La Les styles de carte sont enregistrés en tant qu'ID de carte dans votre projet Cloud. Pour appliquer un style à votre carte JavaScript de suivi du parc, spécifiez une 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'
  }
});

TypeScript

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

Utiliser des styles de cartes basés sur du code

Vous pouvez aussi personnaliser le style de carte 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 la personnalisation des repères

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

Vous pouvez créer une personnalisation simple en spécifiant un MarkerOptions à appliquer à tous les repères du même type. Les modifications spécifiées dans la section sont appliqués une fois que chaque repère a été créé, en écrasant les valeurs par défaut options.

En tant qu'option plus avancée, vous pouvez spécifier une fonction de personnalisation. Les fonctions de personnalisation permettent de styliser les repères en fonction des données. comme ajouter de l'interactivité aux repères, comme la gestion des clics. Plus précisément, le parc Le suivi transmet à la fonction de personnalisation les données relatives au type d'objet Le repère représente un véhicule, un arrêt ou une tâche. Cela permet ensuite au style des repères changent 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 sources externes à Fleet Engine et appliquez un style au 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 le filtrage dans le fournisseur de localisation, comme FleetEngineFleetLocationProvider.vehicleFilter Cela dit, si vous avez besoin d'une fonctionnalité de filtrage supplémentaire, vous pouvez à l'aide de la fonction de personnalisation.

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

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 une MarkerOptions. Suivez ce modèle pour personnaliser le style le repère à l'aide de l'un des paramètres de personnalisation des repères listés ci-dessus.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  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

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

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éhicule visibles. Suivez ce schéma pour filtrer tous les repères en utilisant l'une des options de personnalisation des repères. les paramètres 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 de la flotte, vous pouvez aussi personnaliser l'apparence l'itinéraire du véhicule suivi sur la carte. La bibliothèque crée google.maps.Polyline pour chaque paire de coordonnées dans les données actives ou restantes 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 lorsqu'ils créées ou mises à 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 le véhicule ; (par exemple, en attribuant une nuance plus profonde à l'objet Polyline) ; ce qui le rend plus épais lorsque le véhicule roule plus lentement. 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 FleetEngineVehicleLocationProviderOptions 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 par PolylineOptions Suivez ce schéma pour personnaliser le style de n'importe quel objet Polyline à l'aide des 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 un objet Polyline actif du style. Suivez ce schéma 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.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. Créer un objet Polyline invisible, définissez visible :

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Afficher des objets Polyline tenant compte du trafic

Fleet Engine renvoie des données sur la vitesse du trafic pour les chemins actifs et restants pour le véhicule suivi. Vous pouvez utiliser ces informations pour appliquer un style à Polyline en fonction de la vitesse de leur 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 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 un InfoWindow et l'associer à un le repère du 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. l'itinéraire attendu en désactivant l'ajustement automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez la carte de partage du parcours ; vue.

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 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 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 JavaScript de partage de trajet, qui inclut le suivi de flotte, procédez comme suit:

  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 carte dans la fonction initMap(). La vue contient sur la carte.
  4. Déplacez votre personnalisation dans la fonction de rappel de la vue plan l'initialisation.
  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. 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 utilisez un véhicule dont l'identifiant est spécifié à proximité d'Oracle Park, il s'affiche sur le sur la carte.