Maps Compose 库

Jetpack Compose 是一个声明式的原生界面工具包，可简化和加快界面的开发。使用 Jetpack Compose 时，您只需描述想要的应用外观，剩下的交给 Jetpack Compose 即可。

适用于 Maps SDK for Android 的 Maps Compose 库是一套开源的可组合函数和数据类型，您可以将其与 Jetpack Compose 结合使用来构建自己的应用。

利用 Maps Compose 库中的可组合函数和数据类型，可以执行很多常见任务。一些常用的可组合函数和数据类型包括：

可组合函数/数据类型 说明
Circle 用于向地图中添加圆形的可组合函数。
GoogleMap 用于添加地图的可组合函数。
GroundOverlay 用于向地图中添加地面叠加层的可组合函数。
MapProperties 表示地图上的可修改属性的数据类型。
MapUISettings 表示地图上的界面相关设置的数据类型。
Marker 用于向地图中添加标记的可组合函数。
Polygon 用于向地图中添加多边形的可组合函数。
Polyline 用于向地图中添加多段线的可组合函数。
TileOverlay 用于向地图中添加图块叠加层的可组合函数。

如需所有可组合函数和数据类型的完整列表，请参阅 Maps Compose 库参考文档。

要求

如需将 Maps Compose 库与 Maps SDK for Android 搭配使用，您必须完成以下操作：

  • 下载并安装 Android Studio Arctic Fox。

  • 在 Android Studio 中按照以下设置创建一个 Google 地图项目：

    • 模板类型为 Empty Compose Activity。此模板将添加 Jetpack Compose 所需的必要依赖项。
    • Minimum SDK 设置为 API 21: Android 5.0 (Lollipop) 或更高版本。
    • Language 设置为 Kotlin。

  • 获取 API 密钥并将其添加到您的项目。

  • 按照下一部分中的说明，在项目中安装 Maps Compose 库。

安装

要在您的 Google 地图项目中安装 Maps Compose 库，请执行以下操作：

  1. 将以下依赖项添加到您的模块级 build.gradle 文件：

      dependencies {
    implementation 'com.google.maps.android:maps-compose:2.11.4'
    implementation 'com.google.android.gms:play-services-maps:18.1.0'
}

  2. 在 Android Studio 中重新构建您的项目，以同步这些更改。

向应用中添加地图

以下示例展示了如何使用 GoogleMap 可组合函数添加地图。

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

在此示例中，地图会占据允许的最大空间，且其相机以新加坡为中心。此外，还会创建一个 CameraPositionState，并在 cameraPositionState 中提供此状态，以设置相机的位置。

然后，此示例会在地图内容中调用 Marker 可组合函数，以向地图添加标记。

如需将此示例与通过视图添加地图的示例进行比较，请参阅快速入门。可以发现，可组合函数需要的代码更少，而且您无需操心地图的生命周期。

为地图设置属性

您可以通过提供一个 MapProperties 对象（对于界面相关属性，则为 MapUiSettings 对象），为地图设置属性。您可以修改这些对象，以触发地图重组。

下面的示例使用了 Switch（一种 Material Design 组件）来切换地图上的缩放控件。

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

后续步骤