[Android/Kotlin] Kakao Map V2: 특정 좌표를 모두 화면에 표시하기

 

Kakao Map V2에서는 지도에서 특정 좌표들이 모두 보이도록 카메라를 자동으로 이동 및 확대/축소할 수 있습니다.

이를 위해 kakaoMap.moveCamera(CameraUpdateFactory.fitMapPoints()) 메서드를 활용할 수 있습니다.

이번 글에서는 출발지와 도착지가 지도 화면에 동시에 보이도록 카메라를 설정하는 방법을 공유 하고자 합니다.

 

문제 상황

처음 지도에 출발지와 도착지의 마커를 표시했을 때, 두 위치가 서로 멀리 떨어져 있으면 한 화면에 두 마커가 모두 나타나지 않는 문제가 있었습니다.
이런 경우, 사용자는 출발지나 도착지 중 하나만 확인할 수 있어 불편함을 느낄 수 있습니다.

이를 해결하기 위해 Kakao Map V2의 CameraUpdateFactory.fitMapPoints()를 사용하여, 출발지와 도착지를 포함한 화면을 자동으로 조정하도록 구현했습니다.

 

구현 방법: fitMapPoints()를 이용한 카메라 설정

fitMapPoints() 메서드는 입력된 좌표들이 모두 화면에 보이도록 지도 카메라를 자동으로 이동 및 확대/축소합니다.
또한, 화면 여백을 픽셀 단위로 설정하여 마커와 화면 경계 사이에 충분한 공간을 확보할 수 있습니다.

private fun fitBoundsToShowMarkers() {
    if (map == null) {
        Log.d("MonitoringActivity", "KakaoMap is not initialized.")
        return
    }

    // 출발지와 도착지의 좌표가 유효한지 확인
    if (departureLatitude == 0.0 || departureLongitude == 0.0 ||
        destinationLatitude == 0.0 || destinationLongitude == 0.0
    ) {
        Log.d("MonitoringActivity", "Invalid coordinates for fitting bounds.")
        return
    }

    // 출발지와 도착지의 좌표 생성
    val departureLatLng = LatLng.from(departureLatitude, departureLongitude)
    val destinationLatLng = LatLng.from(destinationLatitude, destinationLongitude)

    // LatLngBounds.Builder를 사용해 경계 영역 생성 및 카메라 이동
    val builder = LatLngBounds.Builder()
    map?.moveCamera(
        CameraUpdateFactory.fitMapPoints(
            builder.include(departureLatLng)
                .include(destinationLatLng)
                .build(),
            100 // 화면 여백 설정 (단위: 픽셀)
        )
    )

    Log.d("MonitoringActivity", "Camera updated to fit departure and destination.")
}

 

주요 구현 내용

1. LatLngBounds.Builder로 경계 영역 생성

val bounds = LatLngBounds.Builder()
    .include(departureLatLng)
    .include(destinationLatLng)
    .build()

 

• LatLngBounds.Builder는 지도에 표시할 좌표를 기반으로 경계 영역을 정의합니다.
• include() 메서드를 사용해 출발지(departureLatLng)와 도착지(destinationLatLng)를 경계에 포함시킵니다.

2. CameraUpdateFactory.fitMapPoints()로 카메라 설정

        map?.moveCamera(
            CameraUpdateFactory.fitMapPoints(
                builder.include(departureLatLng)
                    .include(destinationLatLng)
                    .build(),
                100 // 화면 여백 (픽셀 단위)
            )
        )

 

• fitMapPoints()는 지정된 경계 영역(LatLngBounds)에 맞게 카메라를 자동으로 조정합니다.
• 두 번째 매개변수로 화면 여백을 설정할 수 있어, 마커와 화면 가장자리 간의 적절한 간격을 유지할 수 있습니다.
  
  

실행 결과

1. 출발지와 도착지가 서로 멀리 떨어져 있어도 두 마커가 화면 안에 모두 표시됩니다.
2. 카메라 줌 레벨과 중심 위치가 자동으로 조정되어 한눈에 출발지와 도착지를 확인할 수 있습니다.
3. 사용자가 마커를 찾기 위해 수동으로 지도를 이동하거나 확대/축소할 필요가 없어집니다.

---

참고:
https://apis.map.kakao.com/android_v2/sample/ 

https://apis.map.kakao.com/android_v2/reference/com/kakao/vectormap/camera/CameraUpdateFactory.html

https://devtalk.kakao.com/t/camera-fit-map-points/138053