Ce document explique comment personnaliser l'apparence des itinéraires des véhicules suivis sur une carte. Les itinéraires sont représentés sur une carte sous forme de polylignes. Pour chaque paire de coordonnées du parcours actif ou restant d'un véhicule, la bibliothèque crée un objet google.maps.Polyline.
Vous pouvez styliser les objets Polyline en spécifiant des personnalisations de polylignes que la bibliothèque applique ensuite dans deux situations:
- Avant d'ajouter les objets à la carte
- Lorsque les données utilisées pour les objets ont changé
Styliser des polylignes
Comme vous pouvez personnaliser les repères, vous pouvez styliser les polylignes de parcours de différentes manières :
Styler les polylignes de parcours par type: utilisez
PolylineOptionspour appliquer le style à tous les objetsPolylinecorrespondants lorsqu'ils sont créés ou mis à jour. Pour obtenir un exemple, consultez Styler des polylignes par type.Styler les polylignes de parcours en fonction des données: spécifiez une fonction de personnalisation basée sur les données de suivi de la flotte ou sur des sources externes:
Données de suivi de la flotte : le suivi de la flotte transmet des données de polyligne à la fonction de personnalisation, y compris des données sur l'état actuel du véhicule. Vous pouvez styliser les polylignes en fonction de ces données, par exemple en colorant l'objet
Polylined'une teinte plus foncée ou en l'épaississant lorsque le véhicule se déplace plus lentement.Sources externes: vous pouvez combiner des données de suivi de la flotte avec des données provenant de sources externes à Fleet Engine et styliser l'objet
Polylineen fonction de ces informations.
Pour obtenir un exemple, consultez Styliser des polylignes en fonction des données.
Contrôler la visibilité des polylignes de parcours : vous pouvez masquer ou afficher des polylignes à l'aide de la propriété
visible. Pour en savoir plus, consultez la section Contrôler la visibilité des polylignes de ce guide.Afficher des informations supplémentaires pour un véhicule ou un repère : vous pouvez afficher des informations supplémentaires à l'aide de la propriété
infowindow. Pour en savoir plus, consultez la section Afficher des informations supplémentaires pour un véhicule ou un repère de ce guide.
Options de personnalisation des polylignes
Les options de personnalisation suivantes sont disponibles dans FleetEngineVehicleLocationProviderOptions et FleetEngineDeliveryVehicleLocationProviderOptions.
Vous pouvez définir des personnalisations pour différents états de parcours dans le trajet du véhicule:
Parcours déjà parcouru : utilisez
takenPolylineCustomization– Parcours à la demande, référence Tâches planifiées.Parcours en cours : utilisez
activePolylineCustomization– Voyages à la demande, référence Tâches planifiées.Parcours non encore parcouru: utilisez
remainingPolylineCustomization. Pour en savoir plus, consultez la référence Trajets à la demande, Tâches planifiées.
Styliser les polylignes de parcours par type
Pour styliser les polylignes de parcours par type, modifiez 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 la polyligne de parcours listées dans la section Options de personnalisation de la polyligne de ce guide.
Exemple pour les trajets à la demande ou les tâches planifiées
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Styliser les polylignes de parcours à l'aide de données
Pour styliser les polylignes de parcours à l'aide de données, modifiez le style des objets Polyline à l'aide de fonctions de personnalisation.
L'exemple suivant montre comment configurer le style d'un itinéraire actif à l'aide d'une fonction de personnalisation. Suivez ce modèle pour personnaliser le style de n'importe quel objet Polyline à l'aide de l'un des paramètres de personnalisation des polylignes listés dans la section Options de personnalisation des polylignes de ce guide.
Exemple de trajets à la demande
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'});
}
}
};
Exemple de tâches planifiées
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
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'});
}
}
};
Exemple de style tenant compte du trafic (trajets à la demande uniquement)
Fleet Engine renvoie les données de vitesse du trafic pour les voies actives et restantes du véhicule suivi. Vous pouvez utiliser ces informations pour styliser les 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'});
}
}
};
Contrôler la visibilité des polylignes
Par défaut, tous les objets Polyline sont visibles. Pour rendre un objet Polyline invisible, définissez sa propriété visible sur false.
Exemple pour les trajets à la demande ou les tâches planifiées
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Afficher une fenêtre d'informations pour un repère de véhicule ou de lieu
Vous pouvez utiliser un InfoWindow pour afficher des informations supplémentaires sur un véhicule ou un repère géographique.
L'exemple suivant montre comment créer un InfoWindow et l'associer à un repère de véhicule.
Exemple de trajets à la demande
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();
Exemple de tâches planifiées
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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 delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 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();