Ce guide décrit comment personnaliser la carte qui s'affiche dans vos l'application Android lorsque vous suivez un trajet. Vous pouvez personnaliser l'apparence la carte de différentes manières:
- Appliquer un style à la carte dans le cloud
- Réglez la caméra pour faire la mise au point sur le trajet
- Personnaliser les repères
- Personnaliser des polylignes
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 du style. 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 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
Pendant une session active de partage de parcours, vous pouvez gérer le zoom de la caméra et vous pouvez vous concentrer de l'une des deux manières suivantes:
AutoCamera
: si vous souhaitez utiliserAutoCamera
, vous n'avez pas de faire quoi que ce soit. La caméra suit le trajet. Pour en savoir plus, consultezAutoCamera
Personnaliser le comportement de la caméra : pour personnaliser le comportement de la caméra, procédez comme suit : vous devez désactiver
AutoCamera
, puis effectuer vos personnalisations. Pour en savoir plus, consultez la section Personnaliser le comportement de la caméra.
AutoCamera
centre la caméra
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
, veillez à l'activer. Pour en savoir plus, consultez
isAutoCameraEnabled
Pour plus d'informations sur le bouton Ma position, consultez l'article Bouton "Ma position" dans la documentation de l'API Maps JavaScript.
Personnaliser le comportement de la caméra
Pour mieux contrôler le comportement de la caméra, suivez ces étapes pour désactiver
AutoCamera
et personnaliser manuellement le comportement de la caméra.
Désactivez
AutoCamera
à l'aide de ConsumerController.setAutoCameraEnabled().Obtenez les limites de caméra recommandées à l'aide de ConsumerController.getCameraUpdate().
Fournissez
CameraUpdate
en tant qu'argument à l'une de ces fonctions Android: