Ce document explique comment personnaliser les polylignes d'itinéraire pour la carte que vous utilisez dans votre application de suivi de parcours sur le Web pour les consommateurs et les opérateurs de flotte.
Avec le SDK grand public, vous pouvez contrôler la visibilité ou le style des polylignes d'itinéraires
polyligne d'itinéraire d'un trajet sur la carte. Le SDK crée un
Un objet google.maps.Polyline
pour chaque paire de coordonnées du
chemin actif ou restant. La bibliothèque applique ensuite
ces personnalisations
deux situations:
- avant d'ajouter les objets à la carte
- lorsque les données utilisées pour les objets ont changé
Styliser les polylignes d'itinéraire
De la même façon que vous appliquez un style aux repères, vous appliquez un style aux polylignes d'itinéraires à l'aide de paramètres de personnalisation. Vous pouvez alors configurer les styles à l'aide de l'une des méthodes approches suivantes:
- Plus simple: utilisez
PolylineOptions
pour appliquer à toutes les correspond aux objetsPolyline
lors de leur création ou de leur mise à jour. - Avancé: spécifiez une fonction de personnalisation.
Les fonctions de personnalisation permettent d'appliquer un style individuel aux objets en fonction
envoyées par Fleet Engine. La fonction peut modifier le style de chaque
en fonction de l'état actuel du parcours ; par exemple, colorier
Polyline
: appliquer une ombre plus profonde à l'objet ou la rendre plus épaisse lorsque le véhicule est se déplacer plus lentement. Vous pouvez même effectuer une jointure depuis des sources extérieures à Fleet Engine et appliquez un style à l'objetPolyline
en fonction de ces informations.
Paramètres de personnalisation
Lorsque vous appliquez un style aux polylignes d'itinéraire, vous utilisez les paramètres fournis dans
FleetEngineShipmentLocationProviderOptions
Ces paramètres permettent
différents états du parcours du véhicule, comme suit:
- Chemins déjà empruntés: utilisez
takenPolylineCustomization
. - Chemin suivi actif: utilisez
activePolylineCustomization
. - Chemin pas encore emprunté: utilisez
remainingPolylineCustomization
.
Utiliser PolylineOptions
L'exemple suivant montre comment configurer le style d'un objet Polyline
avec PolylineOptions
. Suivez ce modèle pour personnaliser le style de
un objet Polyline
à l'aide des personnalisations de polylignes répertoriées précédemment.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Utiliser des fonctions de personnalisation pour appliquer un style aux polylignes d'itinéraire
L'exemple suivant montre comment configurer le style d'une route active
polyligne. Suivez ce modèle pour personnaliser le style de n'importe quel objet Polyline
.
en utilisant l'un des paramètres de personnalisation de la polyligne d'itinéraire répertoriés précédemment.
JavaScript
// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Contrôler la visibilité des polylignes d'itinéraire
Par défaut, tous les objets Polyline
sont visibles. Créer un objet Polyline
invisible, définissez sa propriété visible
:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};