Ce document explique comment personnaliser l'apparence d'une carte et contrôler la visibilité des données et les options de fenêtre d'affichage. Pour ce faire, utilisez l'une des méthodes suivantes :
- Utiliser les styles de cartes basés dans le cloud
- Définir les options de style de carte directement dans votre propre code
Styliser la carte avec les styles de cartes basés dans le cloud
Pour appliquer un style de carte à votre carte JavaScript de partage de trajets pour les consommateurs, spécifiez un mapId et tout autre mapOptions lorsque vous créez le JourneySharingMapView.
Les exemples suivants montrent comment appliquer un style de carte 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'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
Appliquer un style aux cartes directement dans votre propre code
Vous pouvez également personnaliser le style de la carte en définissant des options de carte lorsque vous créez le JourneySharingMapView. Les exemples suivants montrent comment styliser une carte à l'aide des options de carte. Pour en savoir plus sur les options de carte que vous pouvez définir, consultez mapOptions dans la documentation de référence de l'API Google Maps JavaScript.
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" }
]
}
]
}
});
Contrôler la visibilité des données de tâches pour le SDK
Vous pouvez contrôler la visibilité de certains objets de tâches sur la carte à l'aide de règles de visibilité.
Visibilité par défaut des données de tâches
Par défaut, les données des tâches attribuées à un véhicule sont visibles lorsque le véhicule se trouve à moins de cinq arrêts de la tâche. La visibilité se termine lorsque la tâche est terminée ou annulée.
Ce tableau indique la visibilité par défaut pour chaque type de tâche. Vous pouvez personnaliser la visibilité de nombreuses tâches, mais pas toutes. Pour en savoir plus sur les types de tâches, consultez Types de tâches dans le guide Tâches planifiées.
| Type de tâche | Visibilité par défaut | Personnalisable ? | Description |
|---|---|---|---|
| Tâches d'indisponibilité | Non visible | Non | Utilisé pour les pauses et le ravitaillement des conducteurs. Si un itinéraire vers une tâche de livraison contient également un autre arrêt de véhicule, cet arrêt n'est pas affiché s'il ne contient que des tâches d'indisponibilité. L'heure d'arrivée estimée et la durée estimée de la tâche sont toujours indiquées pour la tâche de livraison elle-même. |
| Ouvrir les tâches liées au véhicule | Visible | Oui | La visibilité se termine lorsque la tâche est terminée ou annulée. Vous pouvez personnaliser la visibilité des tâches de véhicule en cours. Consultez Personnaliser la visibilité des tâches de véhicule ouvertes. |
| Tâches de véhicule terminées | Non visible | Non | Vous ne pouvez pas personnaliser la visibilité des tâches de véhicule clôturées. |
Personnaliser la visibilité des tâches de véhicule en cours
L'interface TaskTrackingInfo fournit un certain nombre d'éléments de données de tâches qui peuvent être rendus visibles avec le SDK Consumer.
| Éléments de données de tâches personnalisables | |
|---|---|
|
Polylignes de route Heure d'arrivée estimée Durée estimée de la tâche |
Distance de conduite restante jusqu'à la tâche Nombre d'arrêts restants Emplacement du véhicule |
Options de visibilité par tâche
Vous pouvez personnaliser la configuration de la visibilité pour chaque tâche en définissant TaskTrackingViewConfig lorsque vous créez ou mettez à jour une tâche dans Fleet Engine. Utilisez les options de visibilité suivantes pour créer des critères permettant de déterminer la visibilité d'un élément de tâche :
| Options de visibilité | ||
|---|---|---|
|
Nombre d'arrêts restants Durée jusqu'à l'heure d'arrivée estimée Distance restante |
Toujours visible Jamais visible |
|
Pour illustrer cela, supposons qu'un exemple de personnalisation ajuste la visibilité de trois éléments de données à l'aide des critères indiqués dans le tableau suivant. Tous les autres éléments suivent les règles de visibilité par défaut.
| Élément de données à ajuster | Visibilité | Critère |
|---|---|---|
| Polyligne de l'itinéraire | Afficher | Le véhicule se trouve à trois arrêts ou moins. |
| ETA | Afficher | La distance de conduite restante est inférieure à 5 000 mètres. |
| Nombre d'arrêts restants | Ne jamais afficher | Le véhicule se trouve à trois arrêts ou moins. |
L'exemple suivant illustre cette configuration :
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Règles de visibilité des polylignes d'itinéraire et de la position des véhicules
Les polylignes d'itinéraire ne peuvent pas être visibles à moins que la position du véhicule ne le soit également. Sinon, la position du véhicule peut être déduite de la fin d'une polyligne.
Ces consignes vous aident à fournir une combinaison valide pour les options de visibilité de la polyligne de l'itinéraire et de la position du véhicule.
| Mêmes options de visibilité | Critère de visibilité | Conseils |
|---|---|---|
| Options des polylignes d'itinéraire définies sur "Toujours visible". | Définissez l'emplacement du véhicule sur "Toujours visible". | |
| La localisation du véhicule est définie sur "Jamais visible". | Définissez les polylignes d'itinéraire sur "jamais visibles". | |
Les options de visibilité sont les suivantes :
|
Définissez les options de polyligne de l'itinéraire sur une valeur inférieure ou égale à celle définie pour la position du véhicule. Exemple : "taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingStopCountThreshold": 5
},
}
|
|
| Différentes options de visibilité | Critères de visibilité | Conseils |
| La localisation du véhicule est visible | Cela ne se produit que lorsque les options de visibilité de la position du véhicule et de la polyligne sont satisfaites. Exemple : "taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingDrivingDistanceMetersThreshold": 3000
},
}Dans cet exemple, la position du véhicule n'est visible que si le nombre d'arrêts restants est d'au moins trois ET si la distance de conduite restante est d'au moins 3 000 mètres. |
Désactiver l'ajustement automatique
Vous pouvez empêcher la carte d'adapter automatiquement la fenêtre d'affichage au véhicule et à l'itinéraire prévu en désactivant l'adaptation automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez la vue cartographique du partage de trajet.
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,
...
});