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 classeGMTCMapView
.
Appliquer des styles de cartes basés dans le cloud à la carte
Personnaliser l'apparence des composants de cartes à l'aide de cartes dans le cloud stylisation. 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
le champ 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 fichier 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 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 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 active de partage de parcours, il est utile pour l'utilisateur de voir
Une vue plus large du véhicule tout au long de son trajet plutôt qu'un gros plan
du véhicule sur un itinéraire. Pour ce faire, réglez le zoom de la caméra
à l'aide du AutoCamera
intégré ou en personnalisant le comportement de la caméra
comme suit:
AutoCamera
: si vous souhaitez utiliserAutoCamera
, 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 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.