작성자가 안드로이드 개발자로 커리어를 전향한 이유는 앱을 만드는 게 재밌기 때문이였다.
웹과 서버보단 내가 들고다니는 폰에서 사용할 만한 앱을 만드는 게 더 재밌지 않나?
주말마다 차를 타고 놀러다니는데 가끔 주차장의 넓이가 엄청 큰 장소를 갈 때 내 차를 찾기가 너무 힘들었다.
그래서 간단히 내 위치를 기록하고 지도로 위치를 볼 수 있는 앱을 만들어 보았고
그 중에 Compose로 GoogleMap을 다뤘던 경험을 적어보자한다.
정말 별 거 없다
현재 주소 기록하기를 누르면 내 위도와 경도가 기록되고
구글맵을 통해서 현재 내 위치와 내가 기록한 위치를 지도에 표시한다.
위의 이미지 파일은 내가 기록한 위치와 현재 내 위치가 같은 곳이기에 저렇게 나온다.
구글맵을 내 안드로이드 프로젝트에 추가하는 방법은 블로그에 많이 나와있으므로 생략한다.
implementation("com.google.android.gms:play-services-maps:18.1.0")
implementation("com.google.android.gms:play-services-location:21.0.1")
implementation("com.google.maps.android:maps-compose:2.9.0")
의존성을 추가해야하는데 세번째 코드처럼 compose를 타깃으로 한 의존성을 추가해야한다.
@Composable
fun GoogleMapScreen() {
val context = LocalContext.current
val latLng = getMyLocation(context)
val dataStore = DataStoreModule(context)
var savedLatitude by remember {
mutableDoubleStateOf(0.0)
}
var savedLongitude by remember {
mutableDoubleStateOf(0.0)
}
LaunchedEffect(Unit) {
dataStore.getLatitude.collect {
savedLatitude = it
}
}
LaunchedEffect(Unit) {
dataStore.getLongitude.collect {
savedLongitude = it
}
}
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(latLng, 17f)
}
val uiSettings = remember {
MapUiSettings(myLocationButtonEnabled = true)
}
val properties by remember {
mutableStateOf(MapProperties(isMyLocationEnabled = true))
}
GoogleMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState,
properties = properties,
uiSettings = uiSettings
) {
if (savedLatitude != 0.0 && savedLongitude != 0.0) {
Marker(
state = MarkerState(position = LatLng(savedLatitude, savedLongitude)),
)
}
}
}
DataStore에서 값을 가져오는 코드가 있지만 cameraPositionState 변수부터 보면 된다.
rememberCameraPositionState를 통해 카메라의 위치값을 기억하고, 지도를 몇 배율로(17f) 볼지 정할 수 있다.
uiSetting과 properties 변수엔 내 위치로 이동할 수 있는 버튼을 활성화 시킬 수 있다.(첨부한 이미지 우측 상단) 다만, 버튼의 위치를 옮길 수는 없는 것 같다.
구글맵 컴포즈의 화면을 더 다루고 싶으면 MapUiSetting.kt를 확인해 기능을 enable 해보면 된다.
Marker를 지도에 띄우는 법은 간단하다 Marker 함수를 생성하고 원하는 인자값을 통해 Marker의 속성을 정할 수 있다.
본인은 위치값을 통해 마커가 지도 어디에 생성될지만 설정했지만
title을 통해 마커의 이름을 설정할 수도 있고
onClick 리스너를 설정할 수도 있다.
이것 또한 Marker.kt를 자세히 보면 확인할 수 있다.
개인적으로 xml 환경에서 구글맵, 네이버 지도, 카카오맵을 다뤄봤지만
Compose로 사용하는 GoogleMap이 제일 간단하고 편했다.