[졸업작품기] Kotlin에서 실시간 위치 기반 지도 연동하기

🧨 졸업 작품 팀 프로젝트, Hear-Hero의 2월

 

학부 졸업작품에 대한 이야기를 적어보려 한다. 졸업 이후 한번에 적기에는 기억이 잘 나지 않거나, 써야 할 분량이 많을 것 같아 시간이 있을 때마다 회고를 써볼 예정이다.

 

 

🙌 프론트엔드 코드 개발

 

프론트엔드의 파일 레포지토리를 살펴보면 크게 main, sounds, map, detail 로 나뉜다. 이에 해당하는 ui 코드와 event 등을 작성하는 것이 주된 업무였다. 

 

 

🙌 딥러닝 코드 개발

 

소리 데이터 셋을 기반으로 특정 소리를 인식하고 판별하는 코드를 개발하는 것이다. 이 부분은 언니가 맡아 모델을 비교하며 성능을 측정하는 등 다양한 일을 하셨다.

 

 

🚧 예상치 못한 어려움 : Place a real time location on Google Map

 

1. 구글맵 API 키 추가하기

 

API 키를 가져온 후로 import 해야 하는 부분과 implementation 에서 kotlin 과 java의 방법이 달라 구글링으로 해결했다. 콤마의 위치나 괄호 등 사용법이 다르다는 것을 알게 되었다.

 

2. 소스 코드 작성하기

 

fun NavGraphBuilder.mealPlanScreen(
    navController: NavController,
    bottomBarPadding: PaddingValues,
    bottomBarState: MutableState<Boolean>
) {
    composable(
        route = Navigate.Screen.MealPlan.route
    ) {
        val sigapore = LatLng(1.35, 103.87)

        val cameraPositionState = rememberCameraPositionState {
            position = CameraPosition.fromLatLngZoom(sigapore, 10f)
        }
        var uiSettings by remember{ mutableStateOf(MapUiSettings()) }
        bottomBarState.value = true
       GoogleMap(
           modifier = Modifier
               .fillMaxWidth(fraction = 0.8f)
               .fillMaxHeight(0.5f),
           cameraPositionState = cameraPositionState,
           uiSettings = uiSettings
       ){
       }
    }
}

 

일차적으로 아래와 같은 GoogleMap import를 통해 라이브러리를 불러왔다.

import com.google.maps.android.compose.GoogleMap

상단의 코드를 보면, LatLng은 고정되어 있음을 알 수 있다. 여기서 이를 실시간 위치로 변경하려면 어떻게 해야 할까?

 

@SuppressLint("MissingPermission")
fun NavGraphBuilder.mealPlanScreen(
    navController: NavController,
    bottomBarPadding: PaddingValues,
    bottomBarState: MutableState<Boolean>,
) {
    composable(
        route = Navigate.Screen.MealPlan.route
    ) {

        val sigapore = LatLng(1.3139961,103.7041656)
        val cameraPositionState = rememberCameraPositionState {
            position = CameraPosition.fromLatLngZoom(sigapore, 10f)
        }
        val locationCallback = object : LocationCallback() {
            override fun onLocationResult(locationResult: LocationResult) {
                for (location in locationResult.locations){
                    cameraPositionState.position = CameraPosition.fromLatLngZoom(LatLng(location.latitude, location.longitude), 10f)
                }
            }
        }
        val fusedLocationClient = LocationServices.getFusedLocationProviderClient(LocalContext.current)
        val locationRequest = LocationRequest.create().apply {
            interval = 10000
            fastestInterval = 5000
            priority = LocationRequest.PRIORITY_HIGH_ACCURACY
        }
        fusedLocationClient.requestLocationUpdates(locationRequest,
            locationCallback,
            Looper.getMainLooper())

        val uiSettings by remember{ mutableStateOf(MapUiSettings()) }
        bottomBarState.value = true
        GoogleMap(
           modifier = Modifier
               .fillMaxWidth(fraction = 1.0f)
               .fillMaxHeight(0.7f),
           cameraPositionState = cameraPositionState,
           uiSettings = uiSettings
       ){}
        SoundMapButton()
    }
}

바로 fusedLocationClient를 사용하는 것이다. FusedLocationProviderClient에서 마지막에 저장된 위치 정보를 가져올 수 있고, locationCallback으로 지도 상의 위치를 계속해 업데이트가 가능하다. 

 

👍 2월 회고

 

스택오버플로우의 도움을 많이 받았다. 특히 실시간 위치 연동의 경우 라이브러리가 많아서 사용 중이던 라이브러리와 다른 것의 소스를 레퍼런스로 삼았을 때 에러가 많이 났었다. 중간에는 LatLng이 받아지지 않아 유럽 바다 한 가운데 (0, 0)에 있기도 했다 ^^;; 그리고 UI 설계를 할 때 relatative 한 관계로 코드를 작성해야 화면의 크기가 바뀌어도 모습이 이상해지지 않는다는 것을 다시 한 번 느꼈다. 알아서 척척 잘 바뀌어주면 좋으련만... ㅎㅎ 그럼 다음 달도 아자 아자!