Jetpack Compose – это декларативный нативный набор инструментов для простой и быстрой разработки пользовательского интерфейса. Вам нужно лишь описать то, как должно выглядеть приложение, и Jetpack Compose сделает все остальное.
Библиотека Maps Compose для Maps SDK для Android – это набор компонуемых функций и типов данных с открытым исходным кодом, используемых в сочетании с Jetpack Compose для создания приложений.
Библиотека Maps Compose содержит компонуемые функции и типы данных, позволяющие выполнять множество типичных задач. Некоторые из этих функций и типов данных представлены в таблице ниже.
Элемент | Описание |
---|---|
Circle | Компонуемая функция, добавляющая круг на карту. |
GoogleMap | Компонуемая функция, добавляющая карту. |
GroundOverlay | Компонуемая функция, добавляющая наземное наложение на карту. |
MapProperties | Тип данных для изменяемых свойств карты. |
MapUISettings | Тип данных для настроек карты, связанных с пользовательским интерфейсом. |
Marker | Компонуемая функция, добавляющая маркер на карту. |
Polygon | Компонуемая функция, добавляющая многоугольник на карту. |
Polyline | Компонуемая функция, добавляющая ломаную линию на карту. |
TileOverlay | Компонуемая функция, добавляющая накладываемый фрагмент на карту. |
Полный список компонуемых функций и типов данных приведен в справочной документации по библиотеке Maps Compose.
Требования
Чтобы начать работу с библиотекой Maps Compose в сочетании с Maps SDK для Android, нужно выполнить следующие действия:
- Скачать и установить Android Studio Arctic Fox.
Создать проект Google Карт в Android Studio со следующими настройками:
- Тип шаблона – Empty Compose Activity. Этот шаблон добавляет зависимости, необходимые для Jetpack Compose.
- Минимальная версия SDK – API 21: Android 5.0 (Lollipop) или более поздняя.
- Язык – Kotlin.
Получить ключ API и добавить его в проект.
Установить библиотеку Maps Compose для проекта согласно инструкциям в следующем разделе.
Установка
Чтобы установить библиотеку Maps Compose для проекта Google Карт, выполните следующие действия:
Добавьте в файл
build.gradle
на уровне модуля следующие зависимости:dependencies { implementation 'com.google.maps.android:maps-compose:2.11.4' implementation 'com.google.android.gms:play-services-maps:18.1.0' }
Заново выполните сборку проекта в 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.