La bibliothèque JavaScript Fleet Tracking Library vous permet de visualiser la position des véhicules de vos parcs 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 JavaScript de suivi de parc contient un composant de carte JavaScript qui remplace une entité google.maps.Map
standard et des composants de données permettant de se connecter à Fleet Engine.
Composants
La bibliothèque JavaScript Fleet Tracking Library fournit des composants pour la visualisation des véhicules et des points de cheminement du trajet, 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 du suivi de flotte
Le composant de vue 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 de la carte anime ce véhicule à mesure qu'il se déplace sur sa trajectoire prédite.
Fournisseurs de services de localisation
Les fournisseurs de localisation s'appuient sur les informations stockées dans Fleet Engine pour envoyer les données de localisation des objets suivis à la carte de partage de parcours.
Fournisseur de localisation des véhicules
Le fournisseur de localisation du véhicule affiche les informations de localisation d'un seul véhicule. Elle contient des informations sur l'emplacement du véhicule et le trajet en cours qui lui est attribué.
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 afficher l'emplacement des véhicules pour l'ensemble de votre parc.
Contrôler la visibilité des lieux suivis
Les règles de visibilité déterminent à quel moment un objet Location suivi est visible sur la carte d'un fournisseur de localisation Fleet Engine. Remarque : L'utilisation d'un fournisseur de zone géographique 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. Il est visible lorsque l'état du véhicule est Online
. Cela signifie qu'un véhicule peut être visible même si aucun trajet ne lui est actuellement attribué.
Repères de position des points de cheminement
Un repère de position de point de cheminement indique les points le long du trajet d'un véhicule, en commençant par le point de départ et en terminant par 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 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 de véhicule planifiés sont affichés sur la carte en tant que repères de point de départ, d'intermédiaire et de destination.
Premiers pas avec la bibliothèque JavaScript Fleet Tracking
Avant d'utiliser la bibliothèque JavaScript de suivi de flotte, assurez-vous de bien connaître 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 un ID de trajet et une revendication d'ID de véhicule
Pour suivre les véhicules à l'aide du fournisseur d'emplacement 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 d'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 Cloud IAM Super-utilisateur du service Parc Engine. Notez que cela accorde un accès étendu pour créer, lire et modifier des entités Fleet Engine, et qu'il 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 de jetons d'authentification
La bibliothèque JavaScript de suivi du parc demande un jeton à l'aide de l'outil de récupération de jetons d'authentification lorsque l'une des conditions suivantes est remplie:
- Elle ne possède pas de jeton valide, par exemple lorsqu'elle n'a pas appelé l'outil d'extraction lors d'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 n'appelle pas l'outil de récupération.
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 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, encapsulés dans une promesse:
- Une chaîne
token
. - Un nombre
expiresInSeconds
. Un jeton expire dans ce délai après l'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(),
};
}
Lorsque vous implémentez le point de terminaison côté serveur pour générer les 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 indiqué sous la forme
data.ExpiresInSeconds
. - L'outil de récupération de 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.
- SERVER_TOKEN_URL dépend de l'implémentation 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
- https://
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
une fois l'API chargée. 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 JavaScript Fleet Tracking Library prédéfinit un fournisseur de localisation pour l'API On Demand Rides and 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
.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 ajoutez-la à la page HTML. Votre page doit contenir un élément <div> contenant la vue de la carte. 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. Les méta-informations incluent l'heure d'arrivée prévue et la distance restante avant la prochaine prise en charge ou le prochain dépôt du véhicule. 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.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 qui surviennent 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 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);
});
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 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 une flotte 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 du parc de véhicules
La bibliothèque JavaScript Fleet Tracking Library définit un fournisseur de localisation qui extrait plusieurs véhicules à partir de l'API On Demand Rides and Deliveries. Utilisez l'ID de votre 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. Consultez ListVehiclesRequest pour connaître les formats compatibles.
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. Le suivi de la position ne commencera pas tant que ce paramètre n'aura pas été défini.
Une fois le fournisseur de localisation créé, initialisez la vue plan.
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 localisation. Les 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 du paramètre de méta-informations 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 qui surviennent de manière asynchrone suite à 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 localisation de suivre le parc, définissez ses limites sur "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 Maps, 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 vos 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 JavaScript de suivi du parc, spécifiez un mapId
lorsque vous créez le JourneySharingMapView
. Le champ mapId
ne peut pas être modifié ni ajouté une fois le JourneySharingMapView
instancié. 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 des styles de cartes basés sur du code
Une autre façon de personnaliser le style de 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 la personnalisation des repères
La bibliothèque JavaScript Fleet Tracking Library vous permet de personnaliser l'apparence des repères ajoutés à la carte. Pour ce faire, spécifiez les personnalisations de repères, 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 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, en écrasant les options par défaut.
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 et d'y ajouter de l'interactivité, comme la gestion des clics. Plus précisément, le suivi de flotte 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. Le style des repères peut alors changer en fonction de l'état actuel de l'élément du 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 externes à Fleet Engine et appliquer 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 d'utiliser le filtrage natif dans le fournisseur de zones géographiques, tel que FleetEngineFleetLocationProvider.vehicleFilter
.
Cela dit, lorsque vous avez besoin d'une fonctionnalité de filtrage supplémentaire, vous pouvez appliquer le filtrage à 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 un objet MarkerOptions
. Suivez ce schéma pour personnaliser le style de n'importe quel repère à l'aide de l'un des paramètres de personnalisation 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. Suivez ce modèle pour personnaliser le style de n'importe quel repère à l'aide de l'un des paramètres de personnalisation listé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 schéma pour ajouter la gestion des clics à n'importe quel repère en utilisant l'un des paramètres de personnalisation de repère listé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 les repères en utilisant l'un des paramètres de personnalisation des repères listé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 de flotte, 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 sur le trajet actif ou restant du véhicule.
Vous pouvez styliser les objets Polyline
en spécifiant des personnalisations de polyligne. 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
avec une ombre plus profonde ou en l'épaississant lorsque le véhicule est plus lent). Vous pouvez même effectuer une jointure à partir de sources extérieures à Fleet Engine et appliquer un style à l'objet Polyline
en fonction de ces 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 du parcours du véhicule (par exemple, déjà parcouru, en déplacement actif ou pas encore voyagé). Les paramètres sont les suivants:
takenPolylineCustomization
pour un chemin déjà emprunté ;activePolylineCustomization
, pour un trajet actif ;remainingPolylineCustomization
, pour un chemin qui n'a pas encore été emprunté.
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 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 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 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. Pour rendre un objet Polyline
invisible, définissez sa propriété 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 de circulation pour les chemins actifs et restants pour le véhicule suivi. Vous pouvez utiliser ces informations pour styliser les objets Polyline
en fonction de leur vitesse de circulation:
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 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 prévu en désactivant l'ajustement automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez la vue de carte avec partage du parcours.
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 vous disposiez d'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 JavaScript de partage de trajet, qui inclut le suivi de flotte, procédez comme suit:
- Ajoutez du code pour la fabrique de jetons d'authentification.
- Initialisez un fournisseur de localisation dans la fonction
initMap()
. - Initialisez la vue de carte dans la fonction
initMap()
. La vue contient la carte. - Déplacez votre personnalisation dans la fonction de rappel pour l'initialisation de la vue de la carte.
- 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'ID est spécifié à proximité d'Oracle Park, il s'affichera sur la carte.