Maps Compose-Bibliothek

Jetpack Compose ist ein deklaratives, natives UI-Toolkit für die einfachere und schnellere UI-Entwicklung. Sie geben darin an, wie Ihre Anwendung aussehen soll. Den Rest übernimmt Jetpack Compose.

In der Maps Compose-Bibliothek für das Maps SDK for Android finden Sie zusammensetzbare Open-Source-Funktionen und Datentypen, die Sie mit Jetpack Compose zum Erstellen Ihrer Anwendung verwenden können.

Damit lassen sich viele allgemeine Aufgaben ausführen. Hier ein Auszug gängiger zusammensetzbarer Funktionen und Datentypen:

Funktion/Datentyp Beschreibung
Circle Zusammensetzbare Funktion zum Hinzufügen eines Kreises zu einer Karte
GoogleMap Zusammensetzbare Funktion zum Hinzufügen einer Karte
GroundOverlay Zusammensetzbare Funktion zum Hinzufügen eines Boden-Overlays zu einer Karte
MapProperties Datentyp für Eigenschaften, die auf einer Karte geändert werden können
MapUISettings Datentyp für UI-bezogene Einstellungen auf einer Karte
Marker Zusammensetzbare Funktion zum Hinzufügen einer Markierung zu einer Karte
Polygon Zusammensetzbare Funktion zum Hinzufügen eines Polygons zu einer Karte
Polyline Zusammensetzbare Funktion zum Hinzufügen einer Polylinie zu einer Karte
TileOverlay Zusammensetzbare Funktion zum Hinzufügen eines Kachel-Overlays zu einer Karte

Eine vollständige Liste aller zusammensetzbaren Funktionen und Datentypen finden Sie in der Referenz zur Maps Compose-Bibliothek.

Voraussetzungen

Wenn Sie die Maps Compose-Bibliothek mit dem Maps SDK for Android verwenden möchten, müssen Sie folgende Schritte ausführen:

  • Android Studio Arctic Fox herunterladen und installieren

  • In Android Studio ein Google Maps-Projekt erstellen und dabei folgende Elemente und Einstellungen verwenden:

    • Eine Vorlage vom Typ Empty Compose Activity. Damit werden die für Jetpack Compose erforderlichen Abhängigkeiten hinzugefügt.
    • Für das Minimum SDK muss API 21: Android 5.0 (Lollipop) oder höher angegeben werden.
    • Für Language muss Kotlin angegeben werden.

  • Einen API-Schlüssel anfordern und Ihrem Projekt hinzufügen

  • Die Maps Compose-Bibliothek wie im folgenden Abschnitt beschrieben im Projekt installieren

Installation

So installieren Sie die Maps Compose-Bibliothek in Ihrem Google Maps-Projekt:

  1. Fügen Sie der Datei build.gradle auf Modulebene die folgenden Abhängigkeiten hinzu:

      dependencies {


    // Android Maps Compose composables for the Maps SDK for Android
    implementation 'com.google.maps.android:maps-compose:4.4.1'
}

  2. Erstellen Sie einen neuen Build Ihres Projekts in Android Studio, um die Änderungen zu synchronisieren.

Karte in App einbinden

Im folgenden Beispiel sehen Sie, wie Sie mit der zusammensetzbaren Funktion GoogleMap eine Karte einbinden. 

val singapore = LatLng(1.35, 103.87)
val cameraPositionState = rememberCameraPositionState {
  position = CameraPosition.fromLatLngZoom(singapore, 10f)
}
GoogleMap(
  modifier = Modifier.fillMaxSize(),
  cameraPositionState = cameraPositionState
) {
  Marker(
    state = MarkerState(position = singapore),
    title = "Singapore",
    snippet = "Marker in Singapore"
  )
}

In diesem Beispiel nimmt die Karte den maximal zulässigen Platz ein und die Kamera platziert Singapur in der Kartenmitte. Außerdem wird ein CameraPositionState erstellt und in cameraPositionState angegeben, um die Kameraposition festzulegen.

Im Beispiel wird dann die zusammensetzbare Funktion Marker im Karteninhalt aufgerufen und der Karte so eine Markierung hinzugefügt.

Ein Beispiel, bei dem eine Karte über die Funktion für Ansichten eingebunden wird, finden Sie in der Kurzanleitung. Ein Vergleich zeigt, dass für zusammensetzbare Funktionen weniger Code erforderlich ist und Sie sich um den Lebenszyklus der Karte nicht kümmern müssen.

Eigenschaften auf einer Karte festlegen

Sie können Eigenschaften für die Karte festlegen, indem Sie ein MapProperties-Objekt oder ein MapUiSettings-Objekt (für UI-bezogene Eigenschaften) angeben. Sie können diese Objekte ändern, um die Neuzusammensetzung der Karte auszulösen.

Verwenden Sie im folgenden Beispiel einen Switch, also eine Material Design-Komponente, um die Zoomsteuerelemente auf der Karte zu aktivieren oder zu deaktivieren.

var uiSettings by remember { mutableStateOf(MapUiSettings()) }
var properties by remember {
  mutableStateOf(MapProperties(mapType = MapType.SATELLITE))
}

Box(Modifier.fillMaxSize()) {
  GoogleMap(
    modifier = Modifier.matchParentSize(),
    properties = properties,
    uiSettings = uiSettings
  )
  Switch(
    checked = uiSettings.zoomControlsEnabled,
    onCheckedChange = {
      uiSettings = uiSettings.copy(zoomControlsEnabled = it)
    }
  )
}

Weiteres Vorgehen