android에 Daum Map적용

[은원명]

Programming/Android

http://apis.map.daum.net/android/guide/#step2

Android에 Daum맵 적용

CLOUD7 2016.09.07 14:52

안드로이드앱 개발시 Daum 지도 Android API 를 이용해 Daum 지도를 사용할 수 있습니다.
(지원 사양 Android 2.1(API Level 7) 이상)

준비 사항

Daum 지도 Android API 를 사용하기 전에 준비해야 할 사항에 대해 설명합니다.

SDK 다운로드

최신버전

Download SDKv. 1.2.18.2

구버전
(2012/11/01) Android 지도API Release 1.2.0

APIKey 와 Package Name

Daum 지도 Android API 는 키 발급을 받아야 사용할 수 있습니다. 왼쪽 메뉴의 열쇠모양 을 클릭하면 App 생성 관리 페이지 로 이동합니다. 해당 페이지에서 App을 생성하고 키를 발급 받을 수 있습니다.
API Key 는 package name 당 하나가 발급됩니다. Android 앱의 package name 은 AndroidManifest.xml 파일 내 manifest 엘리먼트의 package 속성에 설정됩니다.

라이브러리 파일 추가

Android Daum Map 라이브러리는 libDaumMapAndroid.jar 와 아키텍쳐별로 libMapEngineApi.so 두개의 바이너리로 구성되어 있습니다.
주어진 압축파일 libs 에 있는 파일들을 해당 프로젝트 /libs/ 로 모두 복사 해야 합니다.

AndroidManifest.xml 에 Permission 추가

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

코드 작성

Daum 지도 Android API 를 사용하는 코드 예제입니다.
더욱 자세한 내용은 Sample App 을 통해 확인 가능합니다.

MapView 띄우기

net.daum.mf.map.api.MapView 객체를 생성하여 Activity 의 content-view 에 삽입하면 지도화면을 손쉽게 구현할 수 있습니다.
지도화면이 보여지기 전에 발급받은 API Key 를 MapView 객체에 지정해 주어야 합니다.

<!-- xml layout -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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" />
    ...
</RelativeLayout>

// java code
MapView mapView = new MapView(this);
mapView.setDaumMapApiKey("API_KEY");

ViewGroup mapViewContainer = (ViewGroup) findViewById(R.id.map_view);
mapViewContainer.addView(mapView);

MapView Event 감지

MapView.MapViewEventListener, MapView.POIItemEventListener, MapView.OpenAPIKeyAuthenticationResultListener 등의 Interface 를 구현해 각 이벤트 발생에 대한 결과를 통보받을 수 있습니다. 각 이벤트에 대한 상세한 내용은 문서 를 참고하세요.

구현한 Interface 객체는 MapView 내 setter 메소드로 등록하면 됩니다.

mapView.setMapViewEventListener(this); // this에 MapView.MapViewEventListener 구현.
mapView.setPOIItemEventListener(this);

지도 중심점, 레벨(zoom) 변경

MapView 클래스가 제공하는 메소드를 이용하여 손쉽게 지도 중심점 과 지도 확대/축소 레벨 을 변경할 수 있습니다.

// 중심점 변경
mapView.setMapCenterPoint(MapPoint.mapPointWithGeoCoord(37.53737528, 127.00557633), true);

// 줌 레벨 변경
mapView.setZoomLevel(7, true);

// 중심점 변경 + 줌 레벨 변경
mapView.setMapCenterPointAndZoomLevel(MapPoint.mapPointWithGeoCoord(33.41, 126.52), 9, true);

// 줌 인
mapView.zoomIn(true);

// 줌 아웃
mapView.zoomOut(true);

마커(Marker) 추가

지도뷰 위에 올라가는 마커를 생성할 수 있습니다.
다음지도에서 제공하는 기본 마커 외 커스텀 마커도 올릴 수 있습니다.
마커 관련 이벤트는 MapView.POIItemEventListener Interface를 구현함으로써 감지 가능합니다.

기본 마커

MapPOIItem marker = new MapPOIItem();
marker.setItemName("Default Marker");
marker.setTag(0);
marker.setMapPoint(MARKER_POINT);
marker.setMarkerType(MapPOIItem.MarkerType.BluePin); // 기본으로 제공하는 BluePin 마커 모양.
marker.setSelectedMarkerType(MapPOIItem.MarkerType.RedPin); // 마커를 클릭했을때, 기본으로 제공하는 RedPin 마커 모양.

mapView.addPOIItem(marker);

커스텀 마커

MapPOIItem customMarker = new MapPOIItem();
customMarker.setItemName("Custom Marker");
customMarker.setTag(1);
customMarker.setMapPoint(MARKER_POINT);
customMarker.setMarkerType(MapPOIItem.MarkerType.CustomImage); // 마커타입을 커스텀 마커로 지정.
customMarker.setCustomImageResourceId(R.drawable.custom_marker_red); // 마커 이미지.
customMarker.setCustomImageAutoscale(false); // hdpi, xhdpi 등 안드로이드 플랫폼의 스케일을 사용할 경우 지도 라이브러리의 스케일 기능을 꺼줌.
customMarker.setCustomImageAnchor(0.5f, 1.0f); // 마커 이미지중 기준이 되는 위치(앵커포인트) 지정 - 마커 이미지 좌측 상단 기준 x(0.0f ~ 1.0f), y(0.0f ~ 1.0f) 값.

mapView.addPOIItem(customMarker);

커스텀 말풍선

// CalloutBalloonAdapter 인터페이스 구현
class CustomCalloutBalloonAdapter implements CalloutBalloonAdapter {
	private final View mCalloutBalloon;

	public CustomCalloutBalloonAdapter() {
		mCalloutBalloon = getLayoutInflater().inflate(R.layout.custom_callout_balloon, null);
	}

	@Override
	public View getCalloutBalloon(MapPOIItem poiItem) {
		((ImageView) mCalloutBalloon.findViewById(R.id.badge)).setImageResource(R.drawable.ic_launcher);
		((TextView) mCalloutBalloon.findViewById(R.id.title)).setText(poiItem.getItemName());
		((TextView) mCalloutBalloon.findViewById(R.id.desc)).setText("Custom CalloutBalloon");
		return mCalloutBalloon;
	}

	@Override
	public View getPressedCalloutBalloon(MapPOIItem poiItem) {
		return null;
	}
}

@Override
protected void onCreate(Bundle savedInstanceState) {
	...
	// 구현한 CalloutBalloonAdapter 등록
	mMapView.setCalloutBalloonAdapter(new CustomCalloutBalloonAdapter());
	...
}

Overlay 요소 그리기

지도뷰 위에 Polyline 과 Circle 을 그릴 수 있습니다.

Polyline

MapPolyline polyline = new MapPolyline();
polyline.setTag(1000);
polyline.setLineColor(Color.argb(128, 255, 51, 0)); // Polyline 컬러 지정.

// Polyline 좌표 지정.
polyline.addPoint(MapPoint.mapPointWithGeoCoord(37.537229, 127.005515));
polyline.addPoint(MapPoint.mapPointWithGeoCoord(37.545024,127.03923));
polyline.addPoint(MapPoint.mapPointWithGeoCoord(37.527896,127.036245));
polyline.addPoint(MapPoint.mapPointWithGeoCoord(37.541889,127.095388));

// Polyline 지도에 올리기.
mapView.addPolyline(polyline);

// 지도뷰의 중심좌표와 줌레벨을 Polyline이 모두 나오도록 조정.
MapPointBounds mapPointBounds = new MapPointBounds(polyline.getMapPoints());
int padding = 100; // px
mMapView.moveCamera(CameraUpdateFactory.newMapPointBounds(mapPointBounds, padding));

Circle

MapCircle circle1 = new MapCircle(
	MapPoint.mapPointWithGeoCoord(37.537094, 127.005470), // center
	500, // radius
	Color.argb(128, 255, 0, 0), // strokeColor 
	Color.argb(128, 0, 255, 0) // fillColor
);
circle1.setTag(1234);
mMapView.addCircle(circle1);

MapCircle circle2 = new MapCircle(
	MapPoint.mapPointWithGeoCoord(37.551094, 127.019470), // center
	1000, // radius
	Color.argb(128, 255, 0, 0), // strokeColor 
	Color.argb(128, 255, 255, 0) // fillColor
);
circle2.setTag(5678);
mMapView.addCircle(circle2);

// 지도뷰의 중심좌표와 줌레벨을 Circle이 모두 나오도록 조정.
MapPointBounds[] mapPointBoundsArray = { circle1.getBound(), circle2.getBound() };
MapPointBounds mapPointBounds = new MapPointBounds(mapPointBoundsArray);
int padding = 50; // px
mMapView.moveCamera(CameraUpdateFactory.newMapPointBounds(mapPointBounds, padding));

Reverse Geo-Coding

MapReverseGeoCoder 클래스를 이용하여 지도 좌표로 주소 정보를 가져올 수 있습니다.

MapReverseGeoCoder reverseGeoCoder = new MapReverseGeoCoder("LOCAL_API_KEY", mapPoint, reverseGeoCodingResultListener, contextActivity);
reverseGeoCoder.startFindingAddress();

...


// reverseGeoCodingResultListener
@Override
public void onReverseGeoCoderFoundAddress(MapReverseGeoCoder mapReverseGeoCoder, String addressString) {
    // 주소를 찾은 경우.
}

@Override
public void onReverseGeoCoderFailedToFindAddress(MapReverseGeoCoder mapReverseGeoCoder) {
    // 호출에 실패한 경우.
}

장소검색

로컬 장소검색 OpenAPI 를 사용하는 코드 예제입니다.
더욱 자세한 내용은 Sample APP 의 Search 예제를 통해 확인 가능합니다.

mEditTextQuery = (EditText) findViewById(R.id.editTextQuery); // 검색창

mButtonSearch = (Button) findViewById(R.id.buttonSearch); // 검색버튼
mButtonSearch.setxxOnClickListener(new xxOnClickListener() { // 검색버튼 클릭 이벤트 리스너
	@Override
	public void xxonClick(View v) {
		String query = mEditTextQuery.getText().toString();
		if (query == null || query.length() == 0) {
			showToast("검색어를 입력하세요.");
			return;
		}
		hideSoftKeyboard(); // 키보드 숨김
		GeoCoordinate geoCoordinate = mMapView.getMapCenterPoint().getMapPointGeoCoord();
		double latitude = geoCoordinate.latitude; // 위도
		double longitude = geoCoordinate.longitude; // 경도
		int radius = 10000; // 중심 좌표부터의 반경거리. 특정 지역을 중심으로 검색하려고 할 경우 사용. meter 단위 (0 ~ 10000)
		int page = 1; // 페이지 번호 (1 ~ 3). 한페이지에 15개
		String apikey = MapApiConst.DAUM_MAPS_ANDROID_APP_API_KEY;
		
		Searcher searcher = new Searcher(); // net.daum.android.map.openapi.search.Searcher
		searcher.searchKeyword(getApplicationContext(), query, latitude, longitude, radius, page, apikey, new OnFinish‎SearchListener() {
			@Override
			public void onSuccess(List<Item> itemList) {
				mMapView.removeAllPOIItems(); // 기존 검색 결과 삭제
				showResult(itemList); // 검색 결과 보여줌 
			}
			
			@Override
			public void onFail() {
				showToast("API_KEY의 제한 트래픽이 초과되었습니다.");
			}
		});
	}
});

지도앱 URL Scheme

개발중인 App or Web 에서 Daum 지도앱으로 연결하고 싶으신 경우에는 다음과 같은 URL Scheme을 이용하시면 됩니다.

지도앱 열기

지도앱 버전	OS 버전	URL Scheme	설명
모든버전	1.6 +	daummaps://open	지도앱을 실행합니다.
3.8.0 +	1.6 +	daummaps://open?page=placeSearch	지도앱을 실행하고 장소 검색 입력 화면 을 보여줍니다.
3.8.0 +	1.6 +	daummaps://open?page=routeSearch	지도앱을 실행하고 길찾기 입력 화면 을 보여줍니다.

좌표로 이동

지도앱 버전	OS 버전	URL Scheme	설명
모든버전	1.6 +	daummaps://look?p=37.537229,127.005515	지도앱을 실행하고 지정된 좌표 중심으로 지도를 보여주고 마커를 표시합니다.

장소로 이동

지도앱 버전	OS 버전	URL Scheme	설명
모든버전	1.6 +	daummaps://place?id=7813422	지도앱을 실행하고 지정(장소ID)된 장소를 중심으로 지도를 보여주고 마커를 표시합니다.

검색하기

지도앱 버전	OS 버전	URL Scheme	설명
모든버전	1.6 +	daummaps://search?q=맛집&p=37.537229,127.005515	지도앱을 실행하고 지정된 좌표(WGS84) 중심으로 검색합니다.

길찾기

지도앱 버전	OS 버전	URL Scheme	설명
모든버전	1.6 +	daummaps://route?sp=37.537229,127.005515&ep=37.4979502,127.0276368&by=CAR	지도앱을 실행하고 출발지 좌표(WGS84)부터 도착지 좌표(WGS84)까지자동차 길찾기합니다.
모든버전	1.6 +	daummaps://route?sp=37.537229,127.005515&ep=37.4979502,127.0276368&by=PUBLICTRANSIT	지도앱을 실행하고 출발지 좌표(WGS84)부터 도착지 좌표(WGS84)까지대중교통 길찾기합니다.
모든버전	1.6 +	daummaps://route?sp=37.537229,127.005515&ep=37.4979502,127.0276368&by=FOOT	지도앱을 실행하고 출발지 좌표(WGS84)부터 도착지 좌표(WGS84)까지도보 길찾기합니다.

로드뷰 마커 보기

지도앱 버전	OS 버전	URL Scheme	설명
모든버전	1.6 +	daummaps://roadView?p=37.537229,127.005515	지도앱을 실행하고 지정된 좌표(WGS84)의 로드뷰 마커 를 보여줍니다.

버스 노선, 정류장, 지하철역 정보 보기

지도앱 버전	OS 버전	URL Scheme	설명
모든버전	1.6 +	daummaps://transitInfo?id=1100061001&type=busline	지도앱을 실행하고 버스 노선 상세화면을 보여줍니다.
모든버전	1.6 +	daummaps://transitInfo?id=11030671004&type=busstop	지도앱을 실행하고 버스정류장 상세화면을 보여줍니다.
모든버전	1.6 +	daummaps://transitInfo?id=11030671004&type=busstop&busStopName=순천향대학병원	지도앱을 실행하고 버스정류장 패널을 보여줍니다.
모든버전	1.6 +	daummaps://transitInfo?id=SES2632&type=subway	지도앱을 실행하고 지하철역 상세화면을 보여줍니다.

스토어뷰 보기

지도앱 버전	OS 버전	URL Scheme	설명
모든버전	1.6 +	daummaps://storeview?id=659	지도앱을 실행하고 지정(스토어뷰ID)된 스토어뷰를 보여줍니다.

예외처리

• daummaps:// 스킴을 인식하지 못하는 경우 구글 플레이 다음 지도 앱 페이지 로 연결해 앱 설치를 유도합니다.
• daummaps:// 스킴은 인식하지만 지원하지 않는 액션인 경우 지도앱 열기 와 동일하게 처리합니다.

Android geo: URI Scheme 지원

geo:37.537229,127.005515
geo:0,0?q=서울+용산구+이태원로+179

더 살펴보기

Daum 지도 Android API 를 시작하는 방법과 기능에 대해 간략하게 소개해 보았습니다. 여러분의 멋진 어플리케이션을 위해서 더 자세한 API의 기능들을 살펴보세요.

• API를 응용한 예제는 Sample 페이지 에서 다운받아 실행해 볼 수 있습니다.
• API의 기능에 대해 상세히 알기 원한다면 Documentation 페이지 를 참고해 주세요.

• 어렵고 복잡한가요? 개발자 카페의 Q&A게시판 을 방문하세요. 그리고 질문하세요. 여러분과 같은 고민을 하는 개발자를 만나 도움을 얻을 수도 있습니다.

참고해야 할 사항

하기 참고사항은 http://swalloow.tistory.com/81 사이트를 참고하였습니다.

1.

우선 키 발급받는 과정입니다. 

간단한 과정이라 API 페이지에 따로 언급이 없습니다.

http://developers.daum.net/console/

위 링크의 다음 개발자 페이지의 좌측 상단에 앱 만들기 버튼을 눌러 내 프로젝트를 생성해야 합니다.

그리고 나면 자동으로 키가 발급됩니다.

이 때 안드로이드 패키지 명은 com.company.projectName 형식으로 들어가면 됩니다.

* 잘 모르겠다면 AndroidManifest.xml 에 있는 package = " " 부분을 보시면 됩니다.

---

2.

라이브러리를 추가해야 할 때 가이드 문서를 보면 오류가 나는 경우가 많습니다.

저는 http://developljy.tistory.com/11 이 링크의 도움을 받았습니다.

결과적으로 libs 라는 폴더에는 libDaumMapAndroid.jar 파일을 넣고

나머지 armeabi 폴더에 있는 .so 파일들은 main 디렉토리 하위에 넣어 해결했습니다.

---

3.

마시멜로 버전부터 적용되는 권한 체크 문제입니다.

분명히 Manifest.xml 에 ACCESS_FINE_LOCATION 권한을 추가했는데 이러한 오류가 발생할 것입니다.

java.lang.SecurityException: "gps" location provider requires ACCESS_FINE_LOCATION permission.

API level 23 부터는 사용자의 사생활 침해 문제로 인해 권한 체크가 필수가 되었습니다.

따라서 사용자는 앱 설치 후, 위치정보나 카메라 등 접근권한을 동의해야만 사용가능합니다.

그 중에서 위치정보를 받는 권한은 필수 권한이기 때문에 체크를 하지 않으면 오류가 발생합니다.

이를 해결하기 위한 제일 간단한 방법은 targetSdkVersion을 23으로 낮추는 방법인데, 

마시멜로 버전 지원이 안되기 때문에 권하지 않습니다.

따라서 보통 다이얼로그를 띄워 권한을 체크하는 것으로 해결합니다.

권한 체크에 대한 안드로이드 공식 문서는 아래의 링크를 참고

https://developer.android.com/training/permissions/requesting.html

저는 TedPermission이라는 박상권님의 권한체크 라이브러리를 사용해서 해결했습니다.

라이브러리 소개 링크 : http://gun0912.tistory.com/61

실제 적용된 코드는 다음과 같습니다.

public class MainActivity extends AppCompatActivity {

    static final String API_KEY = "please edit your api key";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Using TedPermission library
        PermissionListener permissionlistener = new PermissionListener() {
            @Override
            public void onPermissionGranted() {
                Toast.makeText(MainActivity.this, "권한 허가", Toast.LENGTH_SHORT).show();

                // MapView 객체생성 및 API Key 설정
                MapView mapView = new MapView(MainActivity.this);
                mapView.setDaumMapApiKey(API_KEY);

                RelativeLayout mapViewContainer = (RelativeLayout) findViewById(R.id.map_view);
                mapViewContainer.addView(mapView);

                // 중심점 변경
                mapView.setMapCenterPoint(MapPoint.mapPointWithGeoCoord(37.53737528, 127.00557633), true);

                // 마커 생성 및 설정
                MapPOIItem marker = new MapPOIItem();
                marker.setItemName("Default Marker");
                marker.setTag(0);
                marker.setMapPoint(MapPoint.mapPointWithGeoCoord(37.53737528, 127.00557633));
                marker.setMarkerType(MapPOIItem.MarkerType.BluePin); // 기본으로 제공하는 BluePin 마커 모양.
                marker.setSelectedMarkerType(MapPOIItem.MarkerType.RedPin); // 마커를 클릭했을때, 기본으로 제공하는 RedPin 마커 모양.
                mapView.addPOIItem(marker);
            }

            @Override
            public void onPermissionDenied(ArrayList<String> deniedPermissions) {
                Toast.makeText(MainActivity.this, "권한 거부\n" + deniedPermissions.toString(), Toast.LENGTH_SHORT).show();
            }

        };

        new TedPermission(this)
                .setPermissionListener(permissionlistener)
                .setRationaleMessage("지도 서비스를 사용하기 위해서는 위치 접근 권한이 필요해요")
                .setDeniedMessage("왜 거부하셨어요...\n하지만 [설정] > [권한] 에서 권한을 허용할 수 있어요.")
                .setPermissions(Manifest.permission.ACCESS_FINE_LOCATION)
                .check();
    }

}

출처: http://seyo73.tistory.com/1 [CLOUD7]