지도 Compose 라이브러리

Jetpack Compose는 UI 개발을 간소화하고 가속화하는 선언형 네이티브 UI 도구 모음입니다. 앱이 어떻게 표시되기를 원하는지만 설명해주면 나머지는 Jetpack Compose가 알아서 처리합니다.

Android용 Maps SDK의 Maps Compose 라이브러리는 오픈소스로 제공되는 구성 가능한 함수 및 데이터 유형의 집합으로, Jetpack Compose와 함께 사용해 앱을 빌드할 수 있습니다.

지도 Compose 라이브러리에는 여러 일반적인 작업을 실행할 수 있는 구성 가능한 함수와 데이터 유형이 들어 있습니다. 일반적으로 사용되는 구성 가능한 함수와 데이터 유형에는 다음이 포함됩니다.

구성 가능한 함수 설명
Circle 지도에 원을 추가하는 구성 가능한 함수입니다.
GoogleMap 지도를 추가하는 구성 가능한 함수입니다.
GroundOverlay 지도에 지면 오버레이를 추가하는 구성 가능한 함수입니다.
MapProperties 지도에서 수정할 수 있는 속성의 데이터 유형입니다.
MapUISettings 지도의 UI 관련 설정에 대한 데이터 유형입니다.
Marker 지도에 마커를 추가하는 구성 가능한 함수입니다.
Polygon 지도에 다각형을 추가하는 구성 가능한 함수입니다.
Polyline 지도에 다중선을 추가하는 구성 가능한 함수입니다.
TileOverlay 지도에 타일 오버레이를 추가하는 구성 가능한 함수입니다.

모든 구성 가능한 함수와 데이터 유형의 전체 목록은 Maps Compose 라이브러리 참조를 확인하세요.

요구사항

Android용 Maps SDK에서 지도 Compose 라이브러리를 사용하려면 다음을 수행해야 합니다.

  • Android 스튜디오 Arctic Fox를 다운로드하여 설치합니다.

  • Android 스튜디오에서 다음을 사용하여 Google 지도 프로젝트를 만듭니다.

    • Empty Compose Activity 템플릿 유형을 사용합니다. 이 템플릿은 Jetpack Compose에 필요한 필수 종속 항목을 추가합니다.
    • 최소 SDK는 API 21: Android 5.0 (Lollipop) 이상으로 설정합니다.
    • 언어를 Kotlin으로 설정합니다.

  • API 키를 가져와 프로젝트에 추가합니다.

  • 다음 섹션에 설명된 대로 프로젝트에 지도 Compose 라이브러리를 설치합니다.

설치

다음 단계를 따라 Google 지도 프로젝트에 지도 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 스튜디오에서 프로젝트를 다시 빌드하여 변경사항을 동기화합니다.

앱에 지도 추가하기

다음은 구성 가능한 함수 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 객체를 제공하거나 UI 관련 속성의 MapUiSettings 객체를 제공하여 설정할 수 있습니다. 이러한 객체를 수정하여 지도의 리컴포지션을 트리거할 수 있습니다.

아래는 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)
    }
  )
}

다음 단계