Appliquer un style à une carte

Sélectionnez une plate-forme : Android iOS JavaScript

Ce guide explique comment appliquer un style à la carte s'affiche dans votre application iOS lors d'un trajet.

Avant de commencer

Avant de styliser une carte, vous devez disposer d'une application grand public avec les éléments suivants sont implémentés:

• Une vue plan. Consultez Initialiser la vue plan.

• Un moyen de gérer les événements de vue plan. Voir Gérer les événements de vue plan

Vous devez aussi avoir configuré les services de backend dont le SDK grand public a besoin, et configurer le SDK grand public. Pour en savoir plus, consultez Configurer le SDK grand public. et Qu'est-ce que Fleet Engine ?.

Personnalisations de carte

Les personnalisations disponibles sont les suivantes:

• Appliquer un style à la carte: vous pouvez styliser les couleurs, les polylignes et d'autres éléments cartographiques à l'aide des styles de cartes basés dans le cloud. Consultez Appliquer un style à la carte.

• Régler le zoom de la caméra: vous pouvez utiliser la fonctionnalité intégrée ou définir le vôtre d'options d'appareil photo pour effectuer la mise au point sur un trajet. Voir Réglez le zoom de l'appareil photo pour faire la mise au point sur un trajet.

• Personnaliser des repères et des polylignes: vous pouvez ajouter des repères et des itinéraires personnalisés. à la conception de votre application. Ces éléments de conception permettent à vos clients pour afficher un aperçu dynamique de l'itinéraire du véhicule. Voir Personnaliser les repères et Personnaliser des polylignes

  Le SDK fournit ces options via le consumerMapStyleCoordinator . Cette propriété est disponible via la classe GMTCMapView.

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

Personnalisez l'apparence du composant Maps à l'aide de styles de carte basés dans le cloud. Vous pouvez créer et modifier des styles de carte dans la console Google Cloud pour 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) 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 ConsumerMapFragments:

• De manière statique avec le fichier XML.
• Dynamiquement avec newInstance.

Statiquement 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
  }
}

Ajustez le zoom de l'appareil photo pour faire la mise au point sur un trajet

Lors d'une session de partage de trajet active, il est utile que l'utilisateur voit une vue plus large du véhicule tout au long de son trajet plutôt qu'une vue rapprochée du véhicule sur un itinéraire. Pour ce faire, vous devez ajuster le niveau de zoom de la caméra à l'aide de AutoCamera intégré ou en personnalisant vous-même le comportement de la caméra comme suit :

• AutoCamera: si vous souhaitez utiliser AutoCamera, vous n'avez pas de faire quoi que ce soit. Par défaut, l'appareil photo suit le trajet.

• Personnaliser le comportement de la caméra: pour personnaliser le comportement de la caméra, vous devez désactiver AutoCamera, puis effectuer vos personnalisations.

AutoCamera centre la caméra par défaut

Le SDK grand public fournit une fonctionnalité AutoCamera activée par défaut sur le bouton intégré Ma position pour le SDK Maps. La caméra zoome sur se concentrer sur le partage de l'itinéraire et le point de cheminement du prochain trajet.

Si vous souhaitez utiliser AutoCamera, assurez-vous qu'il est activé. Pour en savoir plus, consultez allowCameraAutoUpdate

Pour en savoir plus sur le bouton Ma position du SDK Maps, consultez la section Bouton "Ma position" dans la documentation du SDK Maps pour iOS.

Personnaliser le comportement de la caméra

Pour mieux contrôler le comportement de la caméra, vous pouvez désactiver AutoCamera et personnaliser le comportement de la caméra.

Désactivez ou activez AutoCamera avec le AllowCameraAutoUpdate .

Pour plus de personnalisations de l'appareil photo, consultez Déplacer la caméra dans la documentation du SDK Maps pour iOS.

Étape suivante

Suivre un trajet dans iOS