Ce guide décrit les différentes manières de styliser la carte affichée dans votre application iOS lorsque vous suivez un trajet.
Avant de commencer
Avant de styliser une carte, vous devez disposer d'une application grand public avec les éléments suivants implémentés :
Une vue plan. Consultez Initialiser la vue de la carte.
Moyen de gérer les événements de la vue de carte. Consultez Gérer les événements de la vue de carte.
Vous devez également avoir configuré les services de backend dont le SDK Consumer a besoin, ainsi que le SDK Consumer lui-même. Pour en savoir plus, consultez Configurer le SDK client et Qu'est-ce que Fleet Engine ?.
Personnalisation de la carte
Voici les personnalisations disponibles :
Appliquer un style à la carte : vous pouvez appliquer un style aux couleurs, aux polylignes et à d'autres éléments de la carte à l'aide des styles de cartes basés dans le cloud. Consultez Appliquer un style à la carte.
Ajuster le zoom de la caméra : vous pouvez utiliser la fonctionnalité intégrée ou définir vos propres options de caméra pour vous concentrer sur un trajet. Consultez Ajuster le zoom de la caméra pour se concentrer sur un trajet.
Personnaliser les repères et les polylignes : vous pouvez ajouter des repères personnalisés et des polylignes d'itinéraire à la conception de votre application. Ces éléments de conception permettent à votre application grand public d'afficher un aperçu dynamique de l'itinéraire du véhicule. Consultez Personnaliser les repères et Personnaliser les polylignes.
Le SDK fournit ces options via la propriété
consumerMapStyleCoordinator. Cette propriété est disponible via la classeGMTCMapView.
Styliser la carte avec les styles de cartes basés dans le cloud
Personnalisez l'apparence du composant de carte à l'aide des styles de cartes basés dans le cloud. Vous pouvez créer et modifier des styles de carte dans la console Google Cloud pour toutes les applications qui utilisent Google Maps, sans avoir à modifier votre code. Pour en savoir plus, sélectionnez votre plate-forme sur la page Styles de cartes basés dans le cloud.
Les classes 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 le moteur de rendu de carte sélectionné est LATEST. Les sections suivantes présentent des exemples d'utilisation du style de carte basé sur le cloud avec votre projet.
ConsumerMapView
Pour utiliser le style de carte basé sur 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 les ConsumerMapFragments :
- de manière statique avec le fichier XML.
- De manière dynamique avec
newInstance.
Statiquement avec le fichier XML
Pour utiliser le style de carte basé dans le cloud avec le fichier XML dans ConsumerMapFragment, ajoutez l'attribut XML map:mapId avec le mapId spécifié. 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"/>
De manière dynamique 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 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
}
}
Ajuster le zoom de la caméra pour se concentrer sur un trajet
Lors d'une session de partage de trajet active, il est utile pour l'utilisateur de voir 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, ajustez le niveau de zoom de la caméra à l'aide de l'élément AutoCamera intégré ou en personnalisant vous-même le comportement de la caméra comme suit :
AutoCamera: si vous souhaitez utiliserAutoCamera, vous n'avez rien à faire. Par défaut, la caméra 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 Consumer fournit une fonctionnalité AutoCamera qui est activée par défaut sur le bouton Ma position intégré au SDK Maps. La caméra effectue un zoom avant pour se concentrer sur l'itinéraire du trajet et le prochain point de passage.
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 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 le personnaliser.
Désactivez ou activez AutoCamera avec la propriété AllowCameraAutoUpdate.
Pour en savoir plus sur la personnalisation de l'appareil photo, consultez Déplacer l'appareil photo dans la documentation du SDK Maps pour iOS.