Android Academy · Leçon

Marqueurs et caméra

Placez des marqueurs et déplacez la caméra.

Marqueurs et caméra est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Annoter la carte

Une carte vierge n'est qu'un ensemble de tuiles. Les marqueurs la transforment en source d'informations : une épingle pour un magasin, un restaurant ou la destination de l'utilisateur. La caméra déplace quant à elle la zone visible là où le récit l'exige.

Dans cette leçon, vous ajouterez des marqueurs, les personnaliserez, les regrouperez en grappes et animerez la caméra en douceur entre différents lieux.

Ajouter un marqueur

Dans maps-compose, les marqueurs sont des composables que vous placez à l'intérieur du lambda de contenu de GoogleMap. Chaque Marker reçoit un MarkerState contenant sa position.

import com.google.maps.android.compose.Marker
import com.google.maps.android.compose.rememberMarkerState

@Composable
fun MapWithMarker() {
    val position = LatLng(37.7749, -122.4194)
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        Marker(
            state = rememberMarkerState(position = position),
            title = "San Francisco",
            snippet = "Welcome to SF"
        )
    }
}

Titre, extrait et fenêtres d'informations

Le title et le snippet apparaissent dans la fenêtre d'informations par défaut lorsque l'utilisateur appuie sur un marqueur. Le titre s'affiche en gras, avec l'extrait en dessous.

Pour un contrôle total, vous pouvez fournir un MarkerInfoWindow avec votre propre contenu composable.

Marker(
    state = rememberMarkerState(position = LatLng(48.8584, 2.2945)),
    title = "Eiffel Tower",
    snippet = "Paris, France",
    // The info window pops up on tap by default
)

Personnaliser l'icône du marqueur

Transmettez un BitmapDescriptor via le paramètre icon pour modifier l'apparence d'un marqueur. defaultMarker(hue) recolore l'épingle standard ; vous pouvez également en construire une à partir d'un élément graphique.

import com.google.android.gms.maps.model.BitmapDescriptorFactory

Marker(
    state = rememberMarkerState(position = LatLng(35.6895, 139.6917)),
    title = "Tokyo",
    icon = BitmapDescriptorFactory.defaultMarker(
        BitmapDescriptorFactory.HUE_AZURE
    )
)

De nombreux marqueurs issus de données

Les applications réelles affichent les marqueurs à partir d'une liste. Parcourez vos données à l'intérieur du contenu de la carte et émettez un Marker pour chaque élément. Utilisez une clé stable pour chaque élément.

data class Place(val name: String, val latLng: LatLng)

@Composable
fun PlacesMap(places: List<Place>) {
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        places.forEach { place ->
            Marker(
                state = rememberMarkerState(position = place.latLng),
                title = place.name
            )
        }
    }
}

Gérer les clics sur les marqueurs

Chaque Marker accepte un lambda onClick. Renvoyez true pour traiter l'événement (et empêcher l'affichage de la fenêtre d'informations par défaut), ou false pour laisser le comportement par défaut s'exécuter.

Marker(
    state = rememberMarkerState(position = LatLng(40.7128, -74.0060)),
    title = "New York",
    onClick = {
        // handle the tap, e.g. open a detail screen
        true // consume the event
    }
)

Déplacer la caméra instantanément

Pour déplacer la zone visible sans animation, définissez directement la position de la caméra sur CameraPositionState. Il s'agit d'une coupure nette : la carte se téléporte.

val cameraPositionState = rememberCameraPositionState()

// Instant move
cameraPositionState.position = CameraPosition.fromLatLngZoom(
    LatLng(51.5074, -0.1278), // London
    14f
)

Animer la caméra

Pour une expérience plus fluide, animez la caméra avec animate(). Il s'agit d'un appel suspendu : lancez-le donc depuis un domaine de coroutine. Utilisez un CameraUpdate pour décrire la cible.

import com.google.android.gms.maps.CameraUpdateFactory

val scope = rememberCoroutineScope()
Button(onClick = {
    scope.launch {
        cameraPositionState.animate(
            CameraUpdateFactory.newLatLngZoom(
                LatLng(48.8566, 2.3522), 13f
            ),
            durationMs = 1000
        )
    }
}) { Text("Fly to Paris") }

Afficher plusieurs marqueurs

Pour afficher plusieurs marqueurs à la fois, construisez un LatLngBounds qui les contient tous, puis animez la caméra vers cette zone avec newLatLngBounds et une marge intérieure exprimée en pixels.

import com.google.android.gms.maps.model.LatLngBounds

val bounds = LatLngBounds.Builder().apply {
    places.forEach { include(it.latLng) }
}.build()

scope.launch {
    cameraPositionState.animate(
        CameraUpdateFactory.newLatLngBounds(bounds, 100) // 100px padding
    )
}

Regrouper de nombreux marqueurs

Des centaines de marqueurs surchargent une carte. La bibliothèque maps-compose-utils fournit Clustering, qui regroupe les marqueurs proches dans une seule bulle, laquelle se divise lorsque vous augmentez le zoom.

import com.google.maps.android.compose.clustering.Clustering

@Composable
fun ClusteredMap(items: List<MyClusterItem>) {
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        Clustering(items = items)
    }
}

Lire l'état de la caméra

Vous pouvez également lire la caméra. cameraPositionState.position fournit la cible et le niveau de zoom actuels, tandis que isMoving indique si l'utilisateur est en train de déplacer la carte. C'est utile pour charger progressivement les données uniquement dans la région visible.

LaunchedEffect(cameraPositionState.isMoving) {
    if (!cameraPositionState.isMoving) {
        val center = cameraPositionState.position.target
        // fetch data near `center`
    }
}

Vérification rapide

Vous voulez que la caméra glisse en douceur vers un nouvel emplacement en une seconde au lieu de s'y déplacer brusquement. Quelle solution est correcte ?

Récapitulatif

Vous savez maintenant rendre une carte informative et dynamique :

Placez des composables Marker dans le contenu de GoogleMap, avec un title, un snippet et une icon personnalisée.
Affichez les marqueurs à partir d'une liste de données et gérez onClick.
Déplacez la caméra instantanément via position, ou en douceur via animate().
Adaptez la vue à plusieurs points avec LatLngBounds et réduisez l'encombrement grâce à Clustering.

Ensuite : demander correctement les autorisations de localisation pour que tout cela fonctionne sur de vrais appareils.

Questions Fréquemment Posées

La leçon « Marqueurs et caméra » est-elle gratuite ?

Oui — le texte complet de « Marqueurs et caméra » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Marqueurs et caméra » ?

Placez des marqueurs et déplacez la caméra. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Marqueurs et caméra » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Afficher une carte
Obtenir la position de l’utilisateur
Marqueurs et caméra
Bien gérer les autorisations de localisation

← Retour à Android Academy