Cette page a été traduite par l'API Cloud Translation.

Appliquer un style à une carte

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 cartes 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 du style. Vous pouvez créer et modifier des styles de carte dans la console Google Cloud de vos applications qui utilisent Google Maps, sans avoir à modifier votre code. Pour en savoir plus, consultez 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 les styles de cartes basés dans le cloud dans ConsumerMapView, définissez mapId sur GoogleMapOptions et transmettez GoogleMapOptions à getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or 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 ConsumerMapFragments:

Statiquement avec le XML.
Dynamiquement avec newInstance.

De manière statique avec le code XML

Pour utiliser les styles de cartes basés dans le cloud avec le code XML dans la 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 les styles de cartes basés dans le cloud avec newInstance dans ConsumerMapFragment, définissez le champ mapId sur GoogleMapOptions et transmettez la 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 JavaScript de partage du parcours consommateur, spécifiez un mapId et toute 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.
});

Styliser les 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 dans le SDK

Vous pouvez contrôler la visibilité de certains objets de tâche sur la carte à l'aide de des 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 le véhicule ne se trouve pas à plus de cinq arrêts de la tâche. La visibilité se termine lorsque la tâche est terminées ou annulées.

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 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 qui n'est pas affiché. s'il ne contient que des tâches d'indisponibilité. Heure d'arrivée estimée et la durée estimée d'exécution des tâches sont toujours affichées pour la livraison elle-même.
Ouvrir les tâches du 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 ouvertes avec le véhicule. Voir Personnaliser la visibilité des tâches liées au véhicule.
Tâches liées à des véhicules fermés	Non visible	Non	Vous ne pouvez pas personnaliser la visibilité des tâches fermé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 qui peuvent être rendues visibles à l'aide du SDK grand public.

Éléments de données de tâches personnalisables
Polylignes d'itinéraire 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

Éléments de données de tâches personnalisables

Polylignes d'itinéraire

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é pour chaque tâche en définissant le 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 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 de conduite restante	Toujours visible Jamais visible

Options de visibilité

Nombre d'arrêts restants

Durée avant l'heure d'arrivée estimée

Distance de conduite restante

Toujours visible

Jamais visible

Par exemple, supposons qu'un exemple de personnalisation ajuste la visibilité pour trois d'éléments de données selon les 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 de conduite restante est inférieure à 5 000 mètres.
Nombre d'arrêts restants	Ne jamais afficher	Le véhicule est à moins de 3 arrêts.

L'exemple suivant illustre cette configuration:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Polylignes d'itinéraire et règles de visibilité de la position des véhicules

Les polylignes d'itinéraire ne peuvent être visibles que si l'emplacement du véhicule est également visible; Sinon, la position du véhicule peut être déduite à 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 de polylignes d'itinéraire définies sur "Toujours visible".	Définissez la position du véhicule sur "Toujours visible".
	L'emplacement du véhicule est défini sur "Jamais visible".	Définir les polylignes d'itinéraire sur "Jamais visibles"
	L'option de visibilité est l'une des suivantes: <ph type="x-smartling-placeholder"> </ph> nombre d'arrêts restants durée jusqu'à l'heure d'arrivée prévue distance de conduite restante	Définir les options de la polyligne d'itinéraire sur une valeur inférieure ou égale à la valeur 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
Différentes options de visibilité	L'emplacement du véhicule est visible	Cela ne se produit que lorsque la position du véhicule et les options de visibilité des polylignes sont satisfaites. Exemple : "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } Dans cet exemple, la position du véhicule n'est visible que si les le nombre d'arrêts est d'au moins trois ET le temps de conduite restant 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 prévu en désactivant l'ajustement automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez le partage du parcours la vue plan.

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,
  ...
});

Appliquer un style à une carte

Appliquer des styles de cartes basés dans le cloud à la carte

ConsumerMapView

Exemple

Java

Kotlin

ConsumerMapFragment

De manière statique avec le code XML

Dynamiquement avec newInstance

Java

Kotlin

JavaScript

TypeScript

Styliser les cartes directement dans votre propre code

JavaScript

TypeScript

Contrôler la visibilité des données de tâche dans le SDK

Visibilité par défaut des données de tâche

Personnalisez la visibilité des tâches ouvertes dans le véhicule

Options de visibilité par tâche

Polylignes d'itinéraire et règles de visibilité de la position des véhicules

Désactiver l'ajustement automatique

JavaScript

TypeScript

Étape suivante

`ConsumerMapView`

`ConsumerMapFragment`

Dynamiquement avec `newInstance`