Jetpack Compose에서 Kakao Map API를 사용하여 지도 구현하기

Jetpack Compose에서 Kakao Map API를 사용하여 지도 구현하기

맵

 

안녕하세요! 오늘은 Jetpack Compose를 사용하여 Kakao Map API를 활용해 지도를 구현하는 방법에 대해 알아보겠습니다. 이 튜토리얼을 통해 기본적인 설정부터 지도의 중심을 변경하는 방법까지 단계별로 설명드리겠습니다.

1. 프로젝트 설정

Gradle 설정

먼저 build.gradle 파일에 필요한 의존성을 추가합니다:

gradle

복사

dependencies {
    implementation 'androidx.core:core-ktx:1.6.0'
    implementation 'androidx.compose.ui:ui:1.0.5'
    implementation 'androidx.compose.material:material:1.0.5'
    implementation 'androidx.compose.ui:ui-tooling-preview:1.0.5'
    implementation 'androidx.activity:activity-compose:1.3.1'

    // Kakao Map SDK
    implementation 'com.kakao.maps.open:android:2.12.8'
}

프로젝트 레벨 settings.gradle

프로젝트 루트 디렉토리의 settings.gradle 파일에 Kakao SDK 리포지토리를 추가합니다:

groovy

복사

pluginManagement {
    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven {
           url = uri("https://devrepo.kakao.com/nexus/repository/kakaomap-releases/")
        }
    }
}

rootProject.name = "YourProjectName"
include ':app'

AndroidManifest.xml 설정

위치 권한을 요청하기 위해 AndroidManifest.xml 파일에 다음 권한을 추가합니다:

xml

복사

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

2. 지도 구현

MainActivity 설정

Compose를 사용하여 Kakao Map을 표시하는 MainActivity를 설정합니다:

kotlin

복사

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import net.daum.mf.map.api.MapView
import net.daum.mf.map.api.MapPoint

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            KakaoMapExample()
        }
    }

    @Composable
    fun KakaoMapExample() {
        val context = LocalContext.current
        val mapView = remember {
            MapView(context).also { mapView ->
                mapView.setMapCenterPoint(MapPoint.mapPointWithGeoCoord(37.5665, 126.9780), true)
            }
        }
    }
}

지도의 중심 변경

KakaoMapReadyCallback의 onMapReady 콜백 안에서 지도의 중심을 설정할 수 있습니다:

kotlin

복사

import net.daum.mf.map.api.CameraUpdateFactory
import net.daum.mf.map.api.KakaoMap

val mapView = remember {
    MapView(context).also { mapView ->
        mapView.start(
            object : MapLifeCycleCallback() {
                override fun onMapDestroy() = Unit
                override fun onMapError(e: Exception?) = Unit
                override fun onMapResumed() = Unit
            },
            object : KakaoMapReadyCallback() {
                override fun onMapReady(map: KakaoMap) {
                    val centerLatLng = MapPoint.mapPointWithGeoCoord(37.5665, 126.9780) // 예: 서울 시청 좌표
                    val cameraUpdate = CameraUpdateFactory.newMapPoint(centerLatLng)
                    map.moveCamera(cameraUpdate)
                }
            }
        )
    }
}

결론

이 튜토리얼을 통해 Jetpack Compose 프로젝트에서 Kakao Map API를 사용하여 지도를 표시하고 지도의 중심을 설정하는 방법을 배웠습니다. 이 과정을 따라 하면 여러분도 쉽게 Kakao Map을 앱에 통합할 수 있을 것입니다.

질문이 있으시면 언제든지 댓글로 남겨주세요!

 

아직 정리가 되지 않은 부분이 있으니 참고만 하세요.    정리가 되면 업데이트 해 보겠습니다.