Библиотека Maps Compose

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 Карт, выполните следующие действия:

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

Дальнейшие действия