[방광곡곡] 지도 레이블 클릭시 아이콘 변경

1️⃣  의도

1. firebase에서 가져온 위치를 for문을 돌면서 지도 위에 label을 표시한다.

2. 각 지도 레이블에 클릭 리스너를 붙혀서 

3. A 레이블 클릭

      클릭된 지도 레이블 ⇒  aim_icon 으로 변경

4. B 레이블 클릭 시, 

      A 레이블 ⇒ 원래 아이콘, B 레이블 ⇒  aim_icon으로 변경

 

2️⃣ 문제 상황

의도 3번에서 아예 클릭한 레이블의 아이콘 변경 X, 다른 클릭 리스너는 작동

 

 

3️⃣ 시도 방법

label.setStyles(newStyle)

 

전체 코드

class MapManager(private val context: Context) {

    // 이전에 클릭된 화장실을 추적하기 위한 변수
    private var lastClickedToilet: Label? = null
    private val locationHelper by lazy { LocationHelper(context) }

    // 지도 초기화 함수
    suspend fun initializeMapView(): Boolean {
        val isSuccess = CompletableDeferred<Boolean>()

        withContext(Dispatchers.Main) { // UI 스레드에서 실행
            mapView = (context as NearActivity).findViewById(R.id.map_view)
            mapView.start(object : MapLifeCycleCallback() {
                override fun onMapDestroy() {
                    Log.d("MapManager", "MapView destroyed")
                }

                override fun onMapError(error: Exception) {
                    Log.e("MapManager", "Map error: ${error.message}")
                    isSuccess.completeExceptionally(error)
                }
            }, object : KakaoMapReadyCallback() {
                override fun onMapReady(map: KakaoMap) {
                    kakaoMap = map
                    Log.d("MapManager", "KakaoMap is ready")
                    setupMapClickListener()
                    isSuccess.complete(true)
                }
            })
        }

        return isSuccess.await()
    }


    /**
     * 지도 클릭 리스너 설정 함수
     */

    private fun setupMapClickListener() {
        kakaoMap.setOnLabelClickListener { _, _, clickedLabel ->
            val toilet = labelToToiletMap[clickedLabel]
            if (toilet != null) {
                // 이전에 클릭된 화장실의 레이블을 원래 상태로 복원
                lastClickedToilet?.let {
                    Log.d("지도 클릭", it.toString())
                    restoreLabelToOriginal(it)
                }

                // 클릭된 마커를 로고로 변경
                changeLabelToClicked(clickedLabel)

                //BottomSheet 초기화
                val activity = context as NearActivity
                activity.bottomSheetHelper.initializeBottomSheet(toilet)
                true
            } else {
                false
            }
        }
    }

    // 클릭된 마커를 로고로 변경
    private fun changeLabelToClicked(label: Label) {
        lastClickedToilet = label
        val newStyles = kakaoMap.labelManager?.addLabelStyles(
            LabelStyles.from(
                LabelStyle.from(R.drawable.aim_icon).setZoomLevel(currentZoo)
            )
        )
        label.changeStyles(newStyles)
        Log.d("MapManager", "Label changed to clicked style")
    }

    // 마커를 원래 스타일로 복원
    private fun restoreLabelToOriginal(label : Label) {
        val originalStyles = kakaoMap.labelManager?.addLabelStyles(
            LabelStyles.from(
                LabelStyle.from(R.drawable.map_pin1).setZoomLevel(10),
                LabelStyle.from(R.drawable.map_pin2).setZoomLevel(13),
                LabelStyle.from(R.drawable.map_pin3).setZoomLevel(16),
                LabelStyle.from(R.drawable.map_pin4).setZoomLevel(19)
            )
        )

        // 레이블이 클릭된 경우, 해당 레이블을 원래 스타일로 복원
        label.changeStyles(originalStyles)
        Log.d("MapManager", "Label restored to original")
    }
}

1. 각 label 마다 setupClickListenr()

2. setupClickListener()

    lastClickListener (이전에 눌린 레이블) 이 있다면 restoreLabelToOriginal

    이번에 눌린 레이블 aim_icon으로 변경 changeLabelToClicked

 

4️⃣ 해결방법 

setStyles -> changeStyles

  private fun changeLabelToClicked(label: Label) {
        lastClickedToilet = label
        val newStyles = kakaoMap.labelManager?.addLabelStyles(
            LabelStyles.from(
                LabelStyle.from(R.drawable.aim_icon)
            )
        )
        label.changeStyles(newStyles)
        Log.d("MapManager", "Label changed to clicked style")
    }

 

 

5️⃣  왜 setStyles 는 안돼?

kakaoMap API 참고_ Android Label_changeStyles

https://apis.map.kakao.com/android_v2/docs/api-guide/label/label/

 

 

안드로이드 스튜디오에서 label. 이렇게 하고 기다리면 이렇게 styles 변경 관련 메서드가 뜬다. 나는 label로 접근하려니 

2번, 3번인데

6️⃣ setStyles vs changeStyles

1. setStyles

• 기존 스타일을 완전히 덮어씌우는 메서드입니다.
• 호출 시, 해당 Label의 기존 스타일들이 모두 제거되고 새로운 스타일로 교체됩니다.
• 주로 초기 설정이나 완전한 스타일 변경을 위해 사용됩니다.

---

2. changeStyles

• 기존 스타일 +  변경 사항만 반영하는 메서드입니다.
• 새로운 스타일을 추가하거나, 기존 스타일을 일부 수정할 때 사용됩니다.
• 더 세밀한 제어가 필요할 때 유용합니다.

 

7️⃣ vararg ?

1. vararg (Variable Arguments)

• vararg 키워드는 가변 인수(variable arguments)를 의미합니다.
• 여러 개의 인수를 하나의 배열로 처리할 수 있도록 합니다.
• 개발자가 여러 개의 값을 개별적으로 전달하거나, 배열로 전달할 수 있습니다.

fun applyStyles(vararg styles: LabelStyle) {
    for (style in styles) {
        println(style)
    }
}

// 호출 방법
applyStyles(style1, style2, style3) // 개별 값 전달
applyStyles(*arrayOf(style1, style2, style3)) // 배열 전달

• 호출 시 가변 인수로 여러 개의 LabelStyle을 전달할 수 있습니다.
• 배열로 전달할 경우 *(스프레드 연산자)를 사용하여 배열을 풀어서 전달해야 합니다.

---

2. styles (일반 파라미터)

• styles가 단순히 일반 파라미터로 정의되었다면, 하나의 배열만 전달할 수 있습니다.
• vararg처럼 개별적인 값들을 전달하는 것은 불가능합니다.

fun applyStyles(styles: Array<LabelStyle>) {
    for (style in styles) {
        println(style)
    }
}

// 호출 방법
applyStyles(arrayOf(style1, style2, style3)) // 배열로만 전달 가능

---

차이점 요약

                                   vararg                                                                                            styles (일반 파라미터)

인수 전달 방식	여러 개의 값을 개별적으로 전달하거나 배열 전달 가능	반드시 배열로만 전달 가능
사용의 유연성	더 유연함 (개별 값 또는 배열)	덜 유연함
호출 시 편의성	스프레드 연산자(*)로 배열 풀기 가능	별도의 작업 없이 배열로 전달