Avec la bibliothèque JavaScript de suivi de flotte, vous pouvez personnaliser l'apparence des repères ajoutés à la carte. Pour ce faire, spécifiez des personnalisations de repères, que la bibliothèque de suivi de la flotte applique ensuite avant d'ajouter des repères à la carte et à chaque mise à jour de repère. Vous pouvez personnaliser l'apparence des repères de différentes manières:
Styler les repères en fonction du type: spécifiez un objet
MarkerOptionspour styliser les repères du même type. Les modifications que vous spécifiez sont ensuite appliquées après la création de chaque repère, en écrasant les options par défaut. Pour en savoir plus, consultez la section Styler les repères en fonction du type de ce guide.Styler les repères en fonction des données: spécifiez une fonction de personnalisation basée sur les données, et ajoutez de l'interactivité aux repères, comme la gestion des clics. Vous pouvez appliquer un style en fonction des données de suivi de la flotte ou de sources externes:
Données de suivi de la flotte: le suivi de la flotte transmet des données à la fonction de personnalisation, y compris le type d'objet représenté par le repère: véhicule, arrêt ou tâche. Le style du repère change ensuite en fonction de l'état actuel de l'élément de repère. Par exemple, le nombre d'arrêts restants ou le type de tâche.
Sources externes: vous pouvez combiner les données de suivi de la flotte avec les données provenant de sources externes à Fleet Engine et styliser le repère en fonction de ces informations.
Pour obtenir des exemples, consultez Styler des repères en fonction des données.
Ajouter la gestion des clics aux repères : pour obtenir des exemples, consultez Ajouter la gestion des clics.
Filtrer les repères visibles : filtrez les repères qui s'affichent à l'aide des fonctionnalités de filtrage disponibles dans le fournisseur de position JavaScript. Exemple :
Utiliser la personnalisation des repères pour suivre un véhicule de livraison de tâches planifiées : vous pouvez personnaliser les repères pour suivre les véhicules. Pour en savoir plus, consultez Utiliser la personnalisation des repères pour suivre un véhicule de livraison.
Options de personnalisation des repères
La bibliothèque de suivi de flotte fournit les paramètres de personnalisation suivants :
Paramètres de personnalisation des trajets à la demande
Paramètres de personnalisation des tâches planifiées
Styliser les repères en fonction de leur type
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 de n'importe quel repère à l'aide de l'une des options listées dans la section Options de personnalisation des repères.
Exemple de trajets à la demande
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Exemple de tâches planifiées
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Mettre en forme des repères en fonction des données
L'exemple suivant montre comment configurer le style d'un repère de véhicule à l'aide de fonctions de personnalisation. Suivez ce modèle pour personnaliser le style de n'importe quel repère en fonction des données à l'aide de l'une des options listées dans la section Options de personnalisation des repères ci-dessus.
Exemple de trajets à la demande
JavaScript
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
Exemple de tâches planifiées
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
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 à un repère à l'aide de l'une des options listées dans la section Options de personnalisation des repères ci-dessus.
Exemple de trajets à la demande
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Exemple de tâches planifiées
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Filtrer les repères visibles
Si vous devez utiliser setVisible, suivez ce modèle pour filtrer les repères à l'aide de l'une des options listées dans la section Options de personnalisation des repères ci-dessus.
Exemple de trajets à la demande
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);
}
};
Exemple de tâches planifiées
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};