지도 Compose 라이브러리

Jetpack Compose는 UI 개발을 간소화하고 가속화하는 선언적인 네이티브 UI 도구 모음입니다. Jetpack Compose를 사용하면 앱이 어떻게 표시될지 설명하고 Jetpack Compose가 나머지 작업을 처리하도록 할 수 있습니다.

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

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

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

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

요구사항

지도를 사용하여 Android용 Maps SDK가 있는 라이브러리를 작성하려면 다음을 수행해야 합니다.

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

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

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

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

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

설치

Google 지도 프로젝트에 Maps Compose 라이브러리를 설치하려면 다음 단계를 따르세요.

  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 스튜디오에서 프로젝트를 재구성하여 변경사항을 동기화하세요.

앱에 지도 추가

다음 예는 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에 제공됩니다.

그런 다음 지도의 콘텐츠에서 구성 가능한 마커를 호출하여 지도에 마커를 추가합니다.

이 예를 뷰를 사용하여 지도를 추가하는 예와 비교하려면 퀵스타트를 참고하세요. 구성 가능한 함수에 더 적은 코드가 필요하며 지도 수명 주기에 대해 걱정할 필요가 없습니다.

지도에 속성 설정하기

지도 관련 속성은 MapProperties 객체를 제공하거나 UI 관련 속성의 MapUiSettings 객체를 제공하여 설정할 수 있습니다. 이러한 객체를 수정하여 지도의 리컴포지션을 트리거할 수 있습니다.

아래의 예에서는 머티리얼 디자인 구성요소인 스위치를 사용하여 지도에서 확대/축소 컨트롤을 전환합니다.

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

다음 단계