Библиотека 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 {


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

Что дальше