Android Academy · Lektion

Marker und Kamera

Marker platzieren und die Kamera bewegen

Marker und Kamera ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Die Karte mit Markern versehen

Eine leere Karte besteht nur aus Kacheln. Marker machen daraus Informationen – etwa eine Markierung für ein Geschäft, ein Restaurant oder das Ziel des Benutzers. Und die Kamera bewegt den sichtbaren Kartenausschnitt dorthin, wo es für die Darstellung erforderlich ist.

In dieser Lektion fügen Sie Marker hinzu, passen sie an, gruppieren sie zu Clustern und animieren die Kamera fließend zwischen verschiedenen Orten.

Einen Marker hinzufügen

In maps-compose sind Marker Composables, die Sie innerhalb des Inhalts-Lambdas von GoogleMap platzieren. Jeder Marker verwendet einen MarkerState, der seine Position enthält.

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"
        )
    }
}

Titel, Ausschnitt und Infofenster

title und snippet werden im standardmäßigen Infofenster angezeigt, wenn der Benutzer auf einen Marker tippt. Beim Tippen erscheint der Titel fett und darunter der Ausschnitt.

Für vollständige Kontrolle können Sie ein MarkerInfoWindow mit eigenen Composable-Inhalten bereitstellen.

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

Das Markersymbol anpassen

Übergeben Sie über den Parameter icon einen BitmapDescriptor, um das Erscheinungsbild eines Markers zu ändern. defaultMarker(hue) färbt die Standardmarkierung neu ein; Sie können eine Markierung auch aus einem Drawable erstellen.

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
    )
)

Viele Marker aus Daten erstellen

In echten Apps werden Marker aus einer Liste gerendert. Durchlaufen Sie Ihre Daten innerhalb des Karteninhalts und geben Sie für jedes Element einen Marker aus. Verwenden Sie pro Element einen stabilen Schlüssel.

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

Auf Klicks auf Marker reagieren

Jeder Marker akzeptiert ein onClick-Lambda. Geben Sie true zurück, um das Ereignis zu verarbeiten und das standardmäßige Infofenster zu unterdrücken, oder false, damit das Standardverhalten ausgeführt wird.

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

Die Kamera sofort bewegen

Um den sichtbaren Kartenausschnitt ohne Animation zu verschieben, setzen Sie die Kameraposition direkt im CameraPositionState. Das ist ein harter Schnitt – die Karte springt sofort an die neue Position.

val cameraPositionState = rememberCameraPositionState()

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

Die Kamera animieren

Für ein professionelles Erscheinungsbild animieren Sie die Kamera mit animate(). Der Aufruf ist suspendierend, daher müssen Sie ihn in einem Coroutine-Scope starten. Verwenden Sie ein CameraUpdate, um das Ziel zu beschreiben.

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") }

Mehrere Marker einpassen

Um mehrere Marker gleichzeitig anzuzeigen, erstellen Sie ein LatLngBounds, das sie alle umfasst, und animieren Sie anschließend mit newLatLngBounds und einem Abstand in Pixeln dorthin.

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

Viele Marker clustern

Hunderte von Markern überladen eine Karte. Die Bibliothek maps-compose-utils stellt Clustering bereit. Dabei werden nahe beieinander liegende Marker zu einer gemeinsamen Blase zusammengefasst, die sich beim Hineinzoomen aufteilt.

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

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

Den Kamerazustand auslesen

Sie können die Kamera auch auslesen. cameraPositionState.position liefert das aktuelle Ziel und die Zoomstufe, und isMoving zeigt an, ob der Benutzer gerade schwenkt. Das ist nützlich, um Daten nur für den sichtbaren Bereich verzögert zu laden.

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

Kurze Überprüfung

Die Kamera soll innerhalb einer Sekunde sanft zu einem neuen Ort gleiten, statt dorthin zu springen. Welche Variante ist richtig?

Zusammenfassung

Sie können eine Karte jetzt informativ und dynamisch gestalten:

Platzieren Sie Marker-Composables innerhalb des Inhalts von GoogleMap und verwenden Sie dabei title, snippet und ein eigenes icon.
Rendern Sie Marker aus einer Datenliste und verarbeiten Sie onClick.
Bewegen Sie die Kamera sofort über position oder sanft über animate().
Passen Sie mehrere Punkte mit LatLngBounds ein und reduzieren Sie die Unübersichtlichkeit mit Clustering.

Als Nächstes: Standortberechtigungen korrekt anfordern, damit all dies auf echten Geräten funktioniert.

Häufig gestellte Fragen

Ist die Lektion „Marker und Kamera“ kostenlos?

Ja — der vollständige Text von „Marker und Kamera“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Marker und Kamera“?

Marker platzieren und die Kamera bewegen Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Marker und Kamera“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Android Academy