[Android] 안드로이드 카카오맵뷰(Kakao MapView) 연동하기(하얀 화면,흰화면)

안녕하세요.

Kakao Developer에서 지원하는 카카오 맵뷰(Kakao MapView)연동 방법입니다.

안드로이드 카카오 SDK 연동

홈페이지에서 SDK를 받은 후 다음 그림과 같이 넣어주시면 됩니다.

 

Manifests

	<uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:appComponentFactory="androidx.core.app.CoreComponentFactory"
        android:extractNativeLibs="false"
        android:icon="@drawable/ic_launcher_round"
        android:label="label"
        android:roundIcon="@drawable/ic_launcher_round"
        android:supportsRtl="true"
        android:testOnly="true"
        android:networkSecurityConfig="@xml/network_security_config"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true">
        
        <meta-data android:name="com.kakao.sdk.AppKey" android:value="카카오 API Key"/>
        
     </application>

<application></application> 태그 안에 <meta-data>를 넣어주셔야 합니다.

<meta-data android:name="com.kakao.sdk.AppKey" android:value="카카오 API Key"/>

Gradle(Project)

buildscript {

    repositories {
        google()
        jcenter()
        mavenCentral()
        maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/'}
        maven{
            url "https://maven.google.com"
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.6.3'
        classpath 'com.google.gms:google-services:4.3.3'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }

    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

repositoried{} 안에 

maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/'}

이걸 넣어주세요

Gradle(Module)

dependencies {
	~~~~~~~~~~~~~
	implementation files('libs/libDaumMapAndroid.jar')
	~~~~~~~~~~~~~
}

Layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:id="@+id/map_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Activity

import net.daum.mf.map.api.MapPOIItem;
import net.daum.mf.map.api.MapPoint;
import net.daum.mf.map.api.MapView;


public class KakaoMapViewActivity extends AppCompatActivity {
    public String KakaoMapAPI = "카카오 API Key";
    public MapView mMapView;
    public MapPoint mapPoint;
    public LocationManager lm;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate( savedInstanceState );
        setContentView( R.layout.activity_kakaomapview );
        getKeyHash( getApplicationContext() );
        mMapView = new MapView( this );
        ViewGroup mapViewContainer = findViewById( R.id.map_view );
        mMapView.setDaumMapApiKey( KakaoMapAPI );
        mapViewContainer.addView( mMapView );
        mMapView.removeAllPOIItems();
        System.out.println( "================getKey:" + getKeyHash( getApplicationContext() ) );
       	MapMarker("마커에 찍을 내용",location_detail,경도,위도);
        MapMarker("마커에 찍을 내용",location_detail,경도,위도);

        Handler mHandler = new Handler();
        mHandler.postDelayed( new Runnable() {
            public void run() {
                // 3초 후에 현재위치를 받아오도록 설정 , 바로 시작 시 에러납니다.
                mMapView.setCurrentLocationTrackingMode( MapView.CurrentLocationTrackingMode.TrackingModeOnWithHeading );
            }
        }, 4000 ); // 1000 = 1초
        lm = (LocationManager) getApplicationContext().getSystemService( Context.LOCATION_SERVICE );

    }

    public void Marker(String MakerName, double startX, double startY) {
        mapPoint = MapPoint.mapPointWithGeoCoord( startY, startX );
        mMapView.setMapCenterPoint( mapPoint, true );
        //true면 앱 실행 시 애니메이션 효과가 나오고 false면 애니메이션이 나오지않음.
        MapPOIItem marker = new MapPOIItem();
        marker.setItemName(MakerName); // 마커 클릭 시 컨테이너에 담길 내용
        marker.setMapPoint( mapPoint );
        // 기본으로 제공하는 BluePin 마커 모양.
        marker.setMarkerType( MapPOIItem.MarkerType.RedPin );
        // 마커를 클릭했을때, 기본으로 제공하는 RedPin 마커 모양.
        marker.setSelectedMarkerType( MapPOIItem.MarkerType.BluePin );
        mMapView.addPOIItem( marker );
    }
    public void MapMarker(String MakerName, String detail, double startX, double startY) {
        mapPoint = MapPoint.mapPointWithGeoCoord( startY, startX );
        mMapView.setMapCenterPoint( mapPoint, true );
        //true면 앱 실행 시 애니메이션 효과가 나오고 false면 애니메이션이 나오지않음.
        MapPOIItem marker = new MapPOIItem();
        marker.setItemName(MakerName+"("+detail+")"); // 마커 클릭 시 컨테이너에 담길 내용
        marker.setMapPoint( mapPoint );
        // 기본으로 제공하는 BluePin 마커 모양.
        marker.setMarkerType( MapPOIItem.MarkerType.RedPin );
        // 마커를 클릭했을때, 기본으로 제공하는 RedPin 마커 모양.
        marker.setSelectedMarkerType( MapPOIItem.MarkerType.BluePin );
        mMapView.addPOIItem( marker );
    }
    public String getKeyHash(final Context context) {
        PackageInfo packageInfo = Utility.getPackageInfo( context, PackageManager.GET_SIGNATURES );
        if (packageInfo == null)
            return null;
        for (Signature signature : packageInfo.signatures) {
            try {
                MessageDigest md = MessageDigest.getInstance( "SHA" );
                md.update( signature.toByteArray() );
                return Base64.encodeToString( md.digest(), Base64.NO_WRAP );
            } catch (NoSuchAlgorithmException e) {
                System.out.println( "디버그 keyHash" + signature );
            }
        }
        return null;
    }
}

키 해시(Key Hash)값 얻기

public String getKeyHash(final Context context) {
        PackageInfo packageInfo = Utility.getPackageInfo( context, PackageManager.GET_SIGNATURES );
        if (packageInfo == null)
            return null;
        for (Signature signature : packageInfo.signatures) {
            try {
                MessageDigest md = MessageDigest.getInstance( "SHA" );
                md.update( signature.toByteArray() );
                return Base64.encodeToString( md.digest(), Base64.NO_WRAP );
            } catch (NoSuchAlgorithmException e) {
                System.out.println( "디버그 keyHash" + signature );
            }
        }
        return null;
    }

해당 키 해시 값이 나오면, Kakao Developer에 가서 [플랫폼] 탭에서 키 해시값을 등록할 수 있습니다.

등록안하시면 연동안되니 꼭 해주셔야 합니다.

주의사항

import net.daum.mf.map.api.MapPOIItem;
import net.daum.mf.map.api.MapPoint;
import net.daum.mf.map.api.MapView;

주의사항

Activity에서 잘못된 import 시 연동이 안됩니다.

꼭 저 위에 있는 것처럼 import를 해주셔야합니다.

 

카카오맵뷰(kakao MapView) 연동 시 하얀 화면 혹은 흰 화면이 나올 때가 있는 데,

API Key가 잘못되어 그런 현상이 나오는 겁니다.

Kakao API Key만 정확히 입력해주시고, 키해시(Key hash)값까지 정확히 해주시면

정상적으로 kakao mapView 연동이 될 겁니다. 

감사합니다.