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 {
   
   
       // Android Maps Compose composables for the Maps SDK for Android
       implementation 'com.google.maps.android:maps-compose:4.4.1'
   }

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

后续步骤

• 查看 Maps Compose 库的 GitHub 项目页面。
• 查看 Jetpack Compose 文档。