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 Attribute, 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 {
    implementation 'com.google.maps.android:maps-compose:2.11.4'
    implementation 'com.google.android.gms:play-services-maps:18.1.0'
}

  2. Erstellen Sie Ihr Projekt in Android Studio neu, 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 ist auf Singapur ausgerichtet. Außerdem wird ein CameraPositionState erstellt und in cameraPositionState angegeben, um die Kameraposition festzulegen.

Dann wird im Beispiel die zusammensetzbare Funktion Markierungen im Karteninhalt aufgerufen und so der Karte 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.

Attribute auf einer Karte festlegen

Zum Festlegen von Attributen auf der Karte lässt sich ein MapProperties-Objekt, für UI-bezogene Attribute ein MapUiSettings-Objekt 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