[Android]Compose에서의 NaverMap

NaverMap을 Compose에서 적용하는 방법

코드는 https://github.com/fornewid/naver-map-compose를 참고한다.

---

1. 프로젝트 설정: Gradle에 Maven 추가

     repositories {
         maven("https://repository.map.naver.com/archive/maven")
     }

   • repositories에 Maven URL을 추가한다.

2. Version Catalog를 통한 Gradle 등록

     naver_map_compose = "1.7.2"
     naver_map_location = "21.0.2"
   
     naver-map-compose = {module = "io.github.fornewid:naver-map-compose", version.ref = "naver_map_compose" }
     naver-map-location = {module = "io.github.fornewid:naver-map-location", version.ref = "naver_map_location" }
   
     implementation(libs.naver.map.compose)
     implementation(libs.naver.map.location)

   • naver-map-compose와 naver-map-location 라이브러리를 Version Catalog에 등록한다.
   • 각 라이브러리의 implementation을 추가한다.

3. Screen에서 NaverMap 추가

     NaverMap(
         modifier = Modifier.fillMaxSize()
     )

   • NaverMap을 화면에 추가해 지도를 표시한다.

4. 지도 설정

   • 지도 줌 범위 및 위경도 제한 설정

         var mapProperties by remember {
             mutableStateOf(
                 MapProperties(
                     maxZoom = 18.0,
                     minZoom = 5.0,
                     extent = LatLngBounds(LatLng(31.43, 122.37), LatLng(44.35, 132.0))
                 )
             )
         }

     • 지도에 줌 범위와 위경도 제한을 설정한다.

   • 현 위치 버튼 활성화 설정

         var mapUiSettings by remember {
             mutableStateOf(
                 MapUiSettings(isLocationButtonEnabled = false)
             )
         }

     • 현 위치 버튼의 활성화 여부를 설정한다.

   • 카메라 제어

         val seoul = LatLng(37.532600, 127.024612)
         val cameraPositionState: CameraPositionState = rememberCameraPositionState {
             position = CameraPosition(seoul, 11.0)
         }
         Box(Modifier.fillMaxSize()) {
             NaverMap(cameraPositionState = cameraPositionState)
         }

     • CameraPositionState를 사용해 카메라의 초기 위치를 설정한다.
     • Box 안에 NaverMap을 배치한다.

5. 마커 추가

     NaverMap(properties = mapProperties, uiSettings = mapUiSettings, cameraPositionState = cameraPositionState) {
         Marker(
             state = MarkerState(position = cameraPositionState.position.target)
         )
     }

   • NaverMap 위에 마커를 그린다.
   • MarkerState의 position을 cameraPositionState로 설정해 카메라 이동 시 마커가 함께 움직이도록 한다.

6. 원하는 위치로 카메라 이동

     @OptIn(ExperimentalNaverMapApi::class)
     private fun moveCameraWithPosition(position: LatLng, cameraPositionState: CameraPositionState) {
         val cameraUpdate = CameraUpdate.scrollTo(position)
         cameraPositionState.move(cameraUpdate)
     }

   • 특정 좌표로 카메라를 이동시키는 함수를 구현한다.
   • 카메라를 원하는 좌표로 이동시킬 때 이 함수를 호출한다.

---

추가 설명

• Naver Map Compose를 사용한 기본적인 지도 구현법은 위와 같고, 이후 새로운 기능이 추가되면 업데이트할 예정이다.