Maps Compose 库
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
Jetpack Compose 是一个声明式的原生界面工具包,可简化和加快界面的开发。使用 Jetpack Compose 时,您只需描述想要的应用外观,剩下的交给 Jetpack Compose 即可。
适用于 Maps SDK for Android 的 Maps Compose 库是一套开源的可组合函数和数据类型,您可以将其与 Jetpack Compose 结合使用来构建自己的应用。
利用 Maps Compose 库中的可组合函数和数据类型,可以执行很多常见任务。一些常用的可组合函数和数据类型包括:
如需所有可组合函数和数据类型的完整列表,请参阅 Maps Compose 库参考文档。
要求
如需将 Maps Compose 库与 Maps SDK for Android 搭配使用,您必须完成以下操作:
安装
要在您的 Google 地图项目中安装 Maps Compose 库,请执行以下操作:
将以下依赖项添加到您的模块级 build.gradle
文件:
dependencies {
// Android Maps Compose composables for the Maps SDK for Android
implementation 'com.google.maps.android:maps-compose:4.4.1'
}
在 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)
}
)
}
后续步骤
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-06-12。
[null,null,["最后更新时间 (UTC):2024-06-12。"],[[["\u003cp\u003eThe Maps Compose library provides composable functions for building map UIs within Jetpack Compose for Android.\u003c/p\u003e\n"],["\u003cp\u003eYou need Android Studio Arctic Fox, an Empty Compose Activity project, and an API key to get started.\u003c/p\u003e\n"],["\u003cp\u003eCommon tasks like adding markers, circles, and polygons are easily achieved using dedicated composable functions.\u003c/p\u003e\n"],["\u003cp\u003eMap properties and UI settings can be dynamically controlled to customize the map's appearance and behavior.\u003c/p\u003e\n"],["\u003cp\u003eThe library simplifies map integration by managing the map's lifecycle and requiring less code compared to traditional Views.\u003c/p\u003e\n"]]],["Jetpack Compose simplifies UI development, and the Maps Compose library provides tools for building map-based apps. Key actions include using composable functions like `GoogleMap`, `Marker`, `Circle`, `Polygon`, `Polyline`, `GroundOverlay`, and `TileOverlay` to add map elements. The library also utilizes data types such as `MapProperties` and `MapUiSettings` to control map characteristics and UI. Installation requires specific Android Studio setup, obtaining an API key, adding dependencies to the `build.gradle.kts` file, and using the functions mentioned.\n"],null,["[Jetpack Compose](https://developer.android.com/jetpack/compose)\nis a declarative, native UI toolkit that simplifies and accelerates\nUI development. With Jetpack Compose, you describe what you want your app to look\nlike, and then let Jetpack Compose handle the rest.\n\nThe [Maps Compose library](https://github.com/googlemaps/android-maps-compose)\nfor the Maps SDK for Android is a set of open-source composable functions\nand data types that you can use with Jetpack Compose to build your app.\n\nThe Maps Compose library contains composable functions and data types that let\nyou perform many common tasks. Some of the commonly used composable functions\nand data types include:\n\n| Composable | Description |\n|---------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|\n| [Circle](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-circle.html) | Composable function to add a circle to a map. |\n| [GoogleMap](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-google-map.html) | Composable function to add a map. |\n| [GroundOverlay](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-ground-overlay.html) | Composable function to add a ground overlay to a map. |\n| [MapProperties](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-map-properties/index.html) | Data type for properties that can be modified on a map. |\n| [MapUISettings](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-map-ui-settings/index.html) | Data type for UI-related settings on a map. |\n| [Marker](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-marker.html) | Composable function to add a marker to a map. |\n| [Polygon](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-polygon.html) | Composable function to add a polygon to a map. |\n| [Polyline](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-polyline.html) | Composable function to add a polyline to a map. |\n| [TileOverlay](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-tile-overlay.html) | Composable function to add a tile overlay to a map. |\n\nFor a complete list of all composable functions and data types, see\n[Maps Compose library reference](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/index.html).\n\nRequirements\n\nTo use the Maps Compose library with the Maps SDK for Android you must:\n\n- [Download](https://developer.android.com/studio/index.html) and install Android Studio Arctic Fox.\n- [Create a Google Maps project](/maps/documentation/android-sdk/config)\n in Android Studio with:\n\n - A template type of **Empty Compose Activity**. This template adds the necessary dependencies required by Jetpack Compose.\n\n | **Note:** Do not create a project of type **Google Maps Activity** when using Jetpack Compose.\n - **Minimum SDK** set to **API 21: Android 5.0 (Lollipop)** or later.\n - **Language** set to **Kotlin**.\n- Obtain an [API key](/maps/documentation/android-sdk/get-api-key)\n and add it to your project.\n\n- Install the Maps Compose library in the project as described in the next section.\n\nInstallation\n\nTo install the Maps Compose library in your Google Maps project:\n\n1. Add the following dependencies to your module-level `build.gradle.kts` file:\n\n \u003cbr /\u003e\n\n ```yaml\n dependencies {\n\n // Android Maps Compose composables for the Maps SDK for Android\n implementation(\"com.google.maps.android:maps-compose:6.7.1\")\n }\n ```\n\n \u003cbr /\u003e\n\n2. Rebuild your project in Android Studio to sync these changes.\n\nAdd a map to your app\n\nThe following example shows how to use the\n[GoogleMap](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-google-map.html)\ncomposable to add a map. \n\n```java\nval singapore = LatLng(1.35, 103.87)\nval singaporeMarkerState = rememberUpdatedMarkerState(position = singapore)\nval cameraPositionState = rememberCameraPositionState {\n position = CameraPosition.fromLatLngZoom(singapore, 10f)\n}\nGoogleMap(\n modifier = Modifier.fillMaxSize(),\n cameraPositionState = cameraPositionState\n) {\n Marker(\n state = singaporeMarkerState,\n title = \"Singapore\",\n snippet = \"Marker in Singapore\"\n )\n}\n```\n\nIn this example, the map occupies the maximum allowed space and its camera\nis centered around Singapore. A [CameraPositionState](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-camera-position-state/index.html) is also created and provided in `cameraPositionState` to set the camera's position.\n\nThe example then calls the\n[Marker](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-marker.html)\ncomposable in the content of the map to add a marker to the map.\n\nTo compare this example with an example that adds a map using Views, see the\n[QuickStart](/maps/documentation/android-sdk/start). Notice how composable\nfunctions requires less code, and you don't have to worry about the map's lifecycle.\n\nSet properties on a map\n\nYou can set properties on the map by providing a [MapProperties](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-map-properties/index.html)\nobject, or a [MapUiSettings](https://googlemaps.github.io/android-maps-compose/maps-compose/com.google.maps.android.compose/-map-ui-settings/index.html) object for\nUI-related properties. You can modify these objects to trigger recomposition of\nthe map.\n\nIn the example below, use a [Switch](https://material.io/components/switches),\na [Material Design component](https://material.io/),\nto toggle zoom controls on the map. \n\n```java\nvar uiSettings by remember { mutableStateOf(MapUiSettings()) }\nvar properties by remember {\n mutableStateOf(MapProperties(mapType = MapType.SATELLITE))\n}\n\nBox(Modifier.fillMaxSize()) {\n GoogleMap(\n modifier = Modifier.matchParentSize(),\n properties = properties,\n uiSettings = uiSettings\n )\n Switch(\n checked = uiSettings.zoomControlsEnabled,\n onCheckedChange = {\n uiSettings = uiSettings.copy(zoomControlsEnabled = it)\n }\n )\n}\n```\n\nWhat's next\n\n- View the [Maps Compose library](https://github.com/googlemaps/android-maps-compose) GitHub project page.\n- View the [Jetpack Compose documentation](https://developer.android.com/jetpack/compose)."]]