Ce document explique comment personnaliser l'apparence d'une carte et des commandes 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 carte basés dans le cloud
- Définir des options de style de carte directement dans votre propre code
Appliquer des styles de cartes basés dans le cloud à la carte
Personnaliser l'apparence du composant Google Maps à l'aide de cartes dans le cloud stylisation. Vous créez et modifiez des styles de carte dans la console Google Cloud pour toutes vos applications qui utilisent Google Maps, sans avoir à modifier votre code. Pour en savoir plus, consultez la section Styles de cartes basés dans le cloud.
Les
ConsumerMapView
et
ConsumerMapFragment
sont compatibles avec les styles de cartes basés dans le cloud.
Pour utiliser les styles de cartes basés dans le cloud, assurez-vous que les cartes sélectionnées
est LATEST
. Les sections suivantes présentent des exemples d'utilisation
des styles de cartes basés dans le cloud pour votre projet.
ConsumerMapView
Pour utiliser le style de carte dans le cloud dans ConsumerMapView
, définissez le champ mapId
sur GoogleMapOptions
et transmettez GoogleMapOptions
à getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) ou getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions).
Exemple
Java
public class SampleAppActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ConsumerMapView mapView = findViewById(R.id.consumer_map_view);
if (mapView != null) {
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
mapView.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId);
}
}
}
Kotlin
class SampleAppActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
mapView.getConsumerGoogleMapAsync(
object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId)
}
}
ConsumerMapFragment
Il existe deux façons d'utiliser les styles de cartes basés dans le cloud dans ConsumerMapFragments :
- De manière statique avec le fichier XML.
- Dynamiquement avec
newInstance
.
De manière statique avec le fichier XML
Pour utiliser les styles de cartes basés dans le cloud avec le fichier XML de la section
ConsumerMapFragment
, ajoutez l'attribut XML map:mapId
avec l'attribut
mapId
Consultez l'exemple ci-dessous :
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
android:id="@+id/consumer_map_fragment"
map:mapId="map-id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Dynamiquement avec newInstance
Pour utiliser le style de carte dans le cloud avec newInstance
dans ConsumerMapFragment
, définissez le champ mapId
sur GoogleMapOptions
et transmettez GoogleMapOptions
à newInstance
. Consultez l'exemple ci-dessous :
Java
public class SampleFragmentJ extends Fragment {
@Override
public View onCreateView(
@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);
getParentFragmentManager()
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit();
consumerMapFragment.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
});
return view;
}
}
Kotlin
class SampleFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)
parentFragmentManager
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit()
consumerMapFragment.getConsumerGoogleMapAsync(
object : ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
})
return view
}
}
Pour appliquer un style de carte à votre carte de partage du parcours client JavaScript, spécifiez un mapId
et tout autre mapOptions
lorsque vous créez 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 les styles de carte en définissant des options de carte lorsque vous créez
JourneySharingMapView
Les exemples suivants montrent comment styliser une carte en utilisant
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âche pour le SDK
Vous pouvez contrôler la visibilité de certains objets de tâche sur la carte à l'aide de règles de visibilité.
Visibilité par défaut des données de tâche
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 la section Types de tâches du 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 en carburant. 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 l'heure de fin de la tâche sont toujours affichées pour la tâche de livraison elle-même. |
Ouvrir des tâches de véhicule | Visible | Oui | La visibilité prend fin lorsque la tâche est terminée ou annulée. Vous pouvez personnaliser la visibilité des tâches ouvertes pour les véhicules. Voir Personnaliser la visibilité des tâches liées au véhicule. |
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. |
Personnalisez la visibilité des tâches ouvertes dans le véhicule
L'interface TaskTrackingInfo
fournit un certain nombre d'éléments de données de tâche pouvant être rendus visibles avec le SDK Consumer.
Éléments de données de tâches personnalisables | |
---|---|
Polylignes de parcours Heure d'arrivée estimée Temps d'exécution estimé de la tâche |
Distance en voiture restante avant d'effectuer 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é par tâche en définissant TaskTrackingViewConfig
lors de la création ou de la mise à jour d'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 avant l'heure d'arrivée estimée Distance restante à parcourir en voiture |
Toujours visible Jamais visible |
Par exemple, 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. Toutes les autres suivent les règles de visibilité par défaut.
Élément de données à ajuster | Visibilité | Critère |
---|---|---|
Polyligne d'itinéraire | Afficher | Le véhicule est à moins de 3 arrêts. |
ETA | Afficher | La distance restante à parcourir est inférieure à 5 000 mètres. |
Nombre d'arrêts restants | Ne jamais afficher | Le véhicule se trouve à moins de trois arrêts. |
L'exemple suivant illustre cette configuration :
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Règles de visibilité des polylignes d'itinéraires et de l'emplacement des véhicules
Les polylignes de parcours ne peuvent pas être visibles si la position du véhicule ne l'est pas é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 d'itinéraires les options de visibilité de la polyligne et de l'emplacement des véhicules.
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 "Never visible" (Jamais visible). | |
L'option de visibilité est l'une des suivantes:
|
Définissez les options de polyligne d'itinéraire sur une valeur inférieure ou égale à celle définie pour l'emplacement du véhicule. Exemple : "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
Différentes options de visibilité | Critères de visibilité | Conseils |
L'emplacement 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 toutes deux remplies. Exemple : "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } Dans cet exemple, l'emplacement du véhicule n'est visible que si le nombre d'arrêts restants est d'au moins trois ET que la distance restante à parcourir est d'au moins 3 000 mètres. |
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 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,
...
});