[카카오맵 API/Kotlin] 앱에 지도 화면 띄우기

우선은 공식 사이트에 방법이 설명되어 있긴 한데 그대로 따라해도 잘 안 되는 관계로 글 작성

https://apis.map.kakao.com/android/guide/

 

1. 카카오 개발자 사이트 https://developers.kakao.com/ 접속 후 개발자 등록하고,

내 애플리케이션 > 애플리케이션 추가하기

해서 등록할 앱을 만들어 준다

사진 안 넣어도 되고 사업자명도 개인일 경우 그냥 아무렇게나 저장해도 무방

 

2. 만들어진 애플리케이션 화면으로 들어가서

플랫폼 > Android 플랫폼 등록 누른 후

패키지명(MainActivity 파일 맨 위에 package com.example.appname 이런 식으로 나와 있는 거)

입력해 주고, 마켓 URL은 그냥 없음 처리 한다

그리고 키 해시 값이 필요한데 (구글링 해 봐도 구할 수 있는 방법 많이 뜬다)

private void getHashKey(){
        PackageInfo packageInfo = null;
        try {
            packageInfo = getPackageManager().getPackageInfo(getPackageName(), PackageManager.GET_SIGNATURES);
        } catch (PackageManager.NameNotFoundException e) {
            e.printStackTrace();
        }
        if (packageInfo == null)
            Log.e("KeyHash", "KeyHash:null");

        for (Signature signature : packageInfo.signatures) {
            try {
                MessageDigest md = MessageDigest.getInstance("SHA");
                md.update(signature.toByteArray());
                Log.d("KeyHash", Base64.encodeToString(md.digest(), Base64.DEFAULT));
            } catch (NoSuchAlgorithmException e) {
                Log.e("KeyHash", "Unable to get MessageDigest. signature=" + signature, e);
            }
        }
    }

위 코드를 붙여넣고 onCreate에 getHashKey() 넣고 실행 시키면 터미널에 해시값이 뜬다

그걸 복붙하면 됨

 

3. 공홈에서 제공해주는 SDK 파일 다운로드

압축 풀고 libs 폴더에 들어가면 보이는

요 세 개를 jniLibs 폴더(새 폴더 만들기) 안에 넣어주고

프로젝트 폴더의 /app/src/main 안에 그대로 붙여넣기 해준다

그리고 libDaumMapAndroid.jar 파일은

/app/libs 폴더 안에 넣어준다

파일 탐색기에서 파일 넣어도 되고, 안드로이드 스튜디오 내에서 파일 추가하려면

Project 뷰의 Android 부분을 클릭해서 Project로 바꿔주면 폴더가 보인다

 

4. 권한 추가하기

AndroidManifest.xml 파일에 권한을 추가해 줘야 한다.

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

다음과 같이 추가하고

<meta-data
	android:name="com.kakao.sdk.AppKey"
	android:value="XXXXXXXXXXXXXXXXXXXXXXXXXXXX"/>

메타 데이터(application 태그 내에 추가)도 추가해준다

XXXXXXXXXXXX 이 부분에는 개발자 사이트에서 네이티브 앱 키를 복사 붙여넣기 해주면 된다

 

build.gradle 파일 내

implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation files('libs/libDaumMapAndroid.jar')

위와 같이 의존성 추가 해준다

 

5. 화면에 지도 띄우기

레이아웃 xml 파일에

<FrameLayout
    android:id="@+id/map_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

다음과 같이 프레임을 만들어 준 다음,

코틀린 파일에서 

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    return inflater.inflate(R.layout.fragment_map, container, false)
}

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val mapView = MapView(context)
    val mapLayout = view.findViewById<FrameLayout>(R.id.map_view)
    mapLayout.addView(mapView)
}

다음과 같이 코드를 적는다(Fragment 기준)

* inflater: xml로 정의된 view를 객체화시키는 역할

* ViewGroup: 자식 view들을 담는 컨테이너 역할

* savedInstanceState: 화면 구성이 변경될 때 현재 인스턴스 데이터를 저장하고, 새 인스턴스에서 다시 불러오는 데 필요

 

* onCreateView()를 통해 생성된 view가 onViewCreated()에 파라미터로 전달되기 때문에 view의 초기 세팅이나 adapter 세팅 등은 onViewCreated()에서 해 주는 것이 적절

 

6. 마커 추가하기

private fun setMarkers() : MapPOIItem {
        val marker = MapPOIItem()
        marker.apply {
            itemName = "이름"
            mapPoint = MapPoint.mapPointWithGeoCoord(위도값, 경도값)
            markerType = MapPOIItem.MarkerType.BluePin
            selectedMarkerType = MapPOIItem.MarkerType.RedPin
        }
        return marker
    }

 

7. 커스텀 말풍선 추가하기

class CustomBalloonAdapter(inflater: LayoutInflater): CalloutBalloonAdapter {
        val mCalloutBallon: View = inflater.inflate(R.layout.balloon_layout, null)
        val name: TextView = mCalloutBallon.findViewById(R.id.market_name)
        val category: TextView = mCalloutBallon.findViewById(R.id.market_category)
        val rate: TextView = mCalloutBallon.findViewById(R.id.market_rate)
        val ratingBar: RatingBar = mCalloutBallon.findViewById(R.id.market_ratingBar)

        override fun getCalloutBalloon(poiItem: MapPOIItem?): View {
            if (poiItem != null) {
                name.text = poiItem.itemName
                category.text = "종류"
                rate.text = "4.0"
                ratingBar.rating = 4.0F
            }
            return mCalloutBallon
        }
        override fun getPressedCalloutBalloon(p0: MapPOIItem?): View {
            return mCalloutBallon
        }
    }