구글 맵 클러스터링 Google Map Clustering 을 사용하면 지도에 나타나는 여러 개의 마커를 묶어서 하나의 그룹으로 표시 할 수 있음. 직방과 같은 앱에서 화면을 줌아웃하면 마커의 수가 숫자로 표시되는 것과 같은 기능


1.  의존성 추가하기

구글 맵 클러스팅을 사용하기 위해서는 부가적으로 maps-utils 라이브러리가 필요
bulid.gradle 에 의존성 추가.

implementation 'com.google.maps.android:android-maps-utils:2.2.3'

 


2.  데이터 클래스에 ClusterItem 상속받기

  📍 각각의 마커에 해당하는 클래스에 ClusterItem을 상속받고 코드를 추가해야 함
  📍 마커에 해당하는 클래스가 Row이기 때문에 Row 클래스에서 ClusterItem을 상속받은 후 반환하는 메서드와 부가 정보를 반환하는 메서드들을 구현

data class Row(
    val ADRES: String,
    val CODE_VALUE: String,
    val FDRM_CLOSE_DATE: String,
    val GU_CODE: String,
    val HMPG_URL: String,
    val LBRRY_NAME: String,
    val LBRRY_SEQ_NO: String,
    val LBRRY_SE_NAME: String,
    val OP_TIME: String,
    val TEL_NO: String,
    val XCNTS: String,
    val YDNTS: String
): ClusterItem {
    override fun getPosition(): LatLng { // 개별 마커가 표시될 좌표 반환
        return LatLng(XCNTS.toDouble(), YDNTS.toDouble())
    }

    override fun getTitle(): String? { // 마커를 클릭했을 때 나타나는 타이틀
        return LBRRY_NAME
    }

    override fun getSnippet(): String? { // 마커를 클릭했을 때 나타나는 서브타이틀
        return ADRES
    }

    override fun hashCode(): Int { // id 에 해당하는 유일한 값을 Int 로 반환
        return LBRRY_SEQ_NO.toInt()
    }
}

 

  ✓  앱이 실행되고 지도에 마커가 표시될 때 안드로이드는 Row 클래스의 getPosition() 메서드를 호출해서 해당 마커의 좌표를 계산

  ✓  특정한 범위 안에 있는 마커들을 묶어서 하나의 마커로 만들고, 몇 개의 마커가 표현되어 있는지 숫자로 표시해 주는 것을 가르켜 클러스터링이라 함

 


3.  클러스터 매니저

클러스터링은 클러스터 매니저 ClusterManager를 통해서 사용할 수 있음
클러스터 매니저를 액티비티에 선언해두고, 마커를 표시하는 코드에서 클러스터 매니저에 추가하는 코드를 작성

 

1)  클러스터 매니저 선언하기

 

  📍  MapsActivity 클래스 안에 clusterManager 프로퍼티를 선언

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap
    private lateinit var binding: ActivityMapsBinding
    private lateinit var clusterManager: ClusterManager<Row>

 

2)  클러스터 매니저 초기화

 

  📍  clusterManager를 초기화하고 필요한 설정을 함. 마커를 표시하기 전에 설정해야 하기 때문에 Map이 생성된 직후인 onMapReady()에서 설정하는 것이 좋음

override fun onMapReady(googleMap: GoogleMap) {
    mMap = googleMap
    
    // 클러스터 매니저 세팅
    clusterManager = ClusterManager(this, mMap)
    mMap.setOnCameraIdleListener(clusterManager) // 화면을 이동 후 멈췄을 때 설정
    mMap.setOnMarkerClickListener(clusterManager) // 마커 클릭 설정
    loadLibrary()
}

 

 

3) 클러스터 매니저에 데이터 추가하기


  📍  반복문에서 마커를 생성하는 코드를 삭제하고 clusterManager에 직접 데이터를 추가

private fun showLibrary(libraryResponse: LibraryResponse) {
    val latLngBounds = LatLngBounds.builder()

    for (lib in libraryResponse.SeoulPublicLibraryInfo.row) {
        // 기존 마커 세팅코드는 삭제하고 클러스터 메니저에 데이터를 추가하는 코드만 넣어줌.
        clusterManager.addItem(lib)

        // 첫 화면에 보여줄 범위를 정하기 위해서 아래 코드 두 줄은 남겨둠.
        val position = LatLng(lib.XCNTS.toDouble(),lib.YDNTS.toDouble())
        latLngBounds.include(position)
    }

    val bounds = latLngBounds.build()
    val padding = 0
    val updated = CameraUpdateFactory.newLatLngBounds(bounds,padding)
    
    mMap.moveCamera(updated)
}

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 ]

+ Recent posts