[kotlin] Jetpack Compose에서 지도 및 위치 서비스 사용하기

11 Dec 2023

kotlin

안녕하세요! Jetpack Compose는 Android 앱의 UI를 작성하기 위한 현대적이고 선언적인 도구입니다. 이러한 새로운 UI 라이브러리를 사용하면 앱의 사용자 위치 및 지도를 손쉽게 통합할 수 있습니다. 이 포스트에서는 Jetpack Compose에서 지도 및 위치 서비스를 사용하는 방법에 대해 알아보겠습니다.

지도 표시하기

먼저, 지도를 표시하는 방법부터 알아봅시다. Jetpack Compose에서는 MapView를 사용하여 지도를 표시할 수 있습니다.

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.fillMaxSize
import com.example.mapdemo.ui.theme.MapDemoTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import com.google.accompanist.maps.MapView
import com.google.accompanist.maps.Map
import com.google.accompanist.maps.rememberMapViewWithLifecycle
import androidx.compose.foundation.layout.Box

@ExperimentalFoundationApi
@Composable
fun MapScreen() {
    MapDemoTheme {
        Box(modifier = Modifier.fillMaxSize()) {
            val mapView = rememberMapViewWithLifecycle()
            Map(
                mapView = mapView,
                modifier = Modifier.fillMaxSize(),
                onMapLoaded = {
                    // 지도가 로드된 후 처리할 작업 수행
                }
            )
        }
    }
}

위 코드에서 MapView와 Map를 사용하여 지도를 표시합니다. rememberMapViewWithLifecycle 함수를 사용하여 MapView를 초기화하고, Map으로 실제 지도를 표시합니다.

사용자 위치 표시하기

다음으로, 사용자의 위치를 지도 상에 표시하는 방법에 대해 알아봅시다. Kotlin에서는 FusedLocationProviderClient를 사용하여 사용자의 위치를 가져올 수 있습니다.

import android.annotation.SuppressLint
import android.content.pm.PackageManager
import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.runtime.*
import androidx.core.content.ContextCompat
import com.google.accompanist.permissions.ExperimentalPermissionsApi
import com.google.accompanist.permissions.rememberPermissionState
import com.google.accompanist.maps.MapView
import com.google.accompanist.maps.Map
import com.google.accompanist.maps.rememberMapViewWithLifecycle
import com.google.accompanist.maps.InitialMapRegion
import com.google.accompanist.maps.CameraPosition
import com.google.accompanist.maps.rememberMapUserLocation

@Composable
fun MapScreen() {
    val mapView = rememberMapViewWithLifecycle()

    val permissionState = rememberPermissionState(android.Manifest.permission.ACCESS_FINE_LOCATION)

    val hasFineLocationPermission by permissionState

    if (hasFineLocationPermission) {
        MyLocationAwareMap(mapView = mapView)
    } else if (permissionState.shouldShowRationale) {
        // 권한 요청 설명 표시
    } else {
        // 권한 요청 시작
    }
}

@SuppressLint("MissingPermission")
@Composable
fun MyLocationAwareMap(mapView: MapView) {
    val map = rememberMapViewWithLifecycle(mapView)
    val userLocation = rememberMapUserLocation(map)
    Map(
        mapView = map,
        modifier = Modifier.fillMaxSize(),
        initialMapRegion = InitialMapRegion(
            CameraPosition(
                target = userLocation,
                zoom = 15f
            )
        ),
    )
}

위 코드에서 MyLocationAwareMap 함수를 사용하여 사용자의 위치를 가져와 지도 상에 표시합니다. rememberMapUserLocation 함수를 사용하여 사용자의 실시간 위치를 지도에 업데이트합니다.

결론

Jetpack Compose는 지도 및 위치 서비스와의 통합을 쉽게 제공하며, 새로운 UI 요소 및 동작을 추가하는 것이 간단해집니다. 이를 통해 사용자의 위치를 추적하고 지도를 표시하는 등의 기능을 구현할 수 있습니다.

저는 Google Accompanist 라이브러리를 사용하여 Jetpack Compose와 지도 및 위치 서비스를 통합하였습니다. 여러분도 이 라이브러리를 참고하여 Jetpack Compose에서 지도 및 위치 서비스를 쉽게 사용해 보시기 바랍니다.