모바일소프트웨어프로젝트 지도 API 1 조 20070216 김성수 20070383 김혜준 20070965 이윤상 20071335 최진 1
매시업? 공개 API? 2
매시업 웹으로제공하고있는정보와서비스를융합하여새로운소프트웨어나서비스, 데이터베이스등을만드는것 < 최초의매시업 > 3
공개 API 누구나사용할수있도록공개된 API 지도, 검색등다양한서비스들에서제공 대표적인예 ) 구글맵 4
지도 API http://dna.daum.net/api/maps 5
지도 API 웹용지도 API 모바일앱용지도 API 6
웹용지도 API 웹브라우저 (Desktop, Mobile) 기반 JavaScript 2012/10/12 기준 최신버전은 v3.32 v1 는서비스종료, v2 는 deprecated * 개발자컨퍼런스 devon API 부트캠프발표자료참고 7
모바일용지도 API Android, ios 기반 2012/10/12 기준 Android v1.0.5 ios v1.1.0 ios 6 지원 2D 지도 / 스카이뷰 / 하이브리드뷰 ios 에서 HD 지도타일지원 (since 1.1.0) 지도이동 / Zoom Level MapViewTouch Event * 개발자컨퍼런스 devon API 부트캠프발표자료참고 8
웹용지도 API 모바일용지도 API 9
웹용지도 API 사용해봅시다 api 키발급 기본지도생성하기 지도컨트롤올리기 지도중심점이동하기 기본마커올리기 이미지마커올리기 인포윈도우올리기 선, 원, 폴리곤올리기 이벤트이용하기 로드뷰기본생성하기 로드뷰옵션설정하기 로드뷰이벤트추가하기 10
API 키발급 1. Daum 로그인 2. https://dna.daum.net/myapi/mapsapi/new 3. 신규등록 4. 상세정보입력 api 선택 -> 웹 : 지도뷰, 모바일 : 모바일앱용지도뷰 사용웹사이트 : localhost 5. API 키등록하기 11
API 키발급 ( 계속 ) http://localhost? http://www.apmsetup.com 다운경로 http://dev.naver.com/frs/download.php/1877/apmsetup7_2010010300.exe 12
API 키발급 ( 계속 ) http://localhost 13
API 키발급 ( 계속 ) file:///c:/apm_setup/htdocs/mobile/test.html http://localhost/mobile/test.html 14
API 키발급 ( 계속 ) Tip! localhost 를바꿀수있습니다. 1. C:\Windows\System32\drivers\etc 2. hosts 파일설정변경 3. 아파치재실행 15
API 키발급 ( 계속 ) Tip! 접속방법 http://localhost or http://dev.starlab or http://127.0.0.1 16
기본지도생성하기 함수로보면 public json map(string apikey) or public xml map(string apikey) 17
지도컨트롤올리기 18
지도중심점이동하기 19
기본마커올리기 20
이미지마커올리기 21
인포윈도우올리기 22
선, 원, 폴리곤올리기 23
선, 원, 폴리곤올리기 ( 계속 ) 24
선, 원, 폴리곤올리기 ( 계속 ) 25
이벤트이용하기 26
로드뷰기본생성하기 27
로드뷰옵션설정하기 28
로드뷰이벤트추가하기 29
Tip! 로컬 API 30
Tip! 로컬 API( 계속 ) 지도형 API와함께사용하면좋음 주소 -> 좌표변환 좌표 -> 주소변환 좌표계변환 31
Tip! 로컬 API 예제 주소 -> 좌표변환 참고 URL http://dna.daum.net/apis/local/ref#addr2coord 32
Tip! 로컬 API 예제 ( 계속 ) 주소 -> 좌표변환 참고 URL http://dna.daum.net/apis/local/ref#addr2coord 33
Tip! 로컬 API 예제 ( 계속 ) http://apis.daum.net/local/geo/addr2coord?apikey= DAUM_LOCAL_DEMO_APIKEY&q= 구미 %20 양호동 &output=xml 34
Tip! 로컬 API 예제 ( 계속 ) http://apis.daum.net/local/geo/addr2coord?apikey= DAUM_LOCAL_DEMO_APIKEY&q= 구미 %20 양호동 &output=json 35
Tip! Daum Open API Code Playground http://tadoli.net/jjgo/pg/ 36
Tip! Google Code - daumapis https://code.google.com/p/daumapis/source/browse/#svn%2ftr unk%2fsamples%2f6.maps%2fv3 37
Tip! GitHub - daumdna https://github.com/daumdna/apis/tree/master/samples/6.maps 38
웹용지도 API 모바일용지도 API 39
모바일용 API 키발급 1 3 2 40
발표자료에있는소스코드는 아래주소를참고하시면됩니다. https://github.com/msu2msu2/mobilekit_daum_map_example 41
모바일용기본지도생성하기 프로젝트생성 42
모바일용기본지도생성하기 ( 계속 ) 프로젝트생성 43
모바일용기본지도생성하기 ( 계속 ) 프로젝트생성 NEXT 44
모바일용기본지도생성하기 ( 계속 ) Android Manifest.xml -> Permission 설정 3 1 2 45
모바일용기본지도생성하기 ( 계속 ) 라이브러리다운 1 2 3 46
모바일용기본지도생성하기 ( 계속 ) 라이브러리추가 [Android]DaumMapOpenAPI_release_1.2.0.zip 47
모바일용기본지도생성하기 ( 계속 ) 라이브러리추가 48
모바일용기본지도생성하기 ( 계속 ) 라이브러리추가 2 3 4 1 6 5 49
모바일용기본지도생성하기 ( 계속 ) 오픈소스 public class DaumMapSampleActivity extends Activity implements MapView.OpenAPIKeyAuthenticationResultListener, MapView.MapViewEventListener, MapView.CurrentLocationEventListener, MapView.POIItemEventListener { private MapView mapview; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); LinearLayout linearlayout = new LinearLayout(this); mapview = new MapView(this); } mapview.setdaummapapikey("daum_mmaps_android_demo_apikey"); mapview.setopenapikeyauthenticationresultlistener(this); mapview.setmapvieweventlistener(this); mapview.setcurrentlocationeventlistener(this); mapview.setpoiitemeventlistener(this); mapview.setmaptype(mapview.maptype.hybrid); linearlayout.addview(mapview); setcontentview(linearlayout); } 50
모바일용기본지도생성하기 ( 계속 ) 코드복사 51
모바일용기본지도생성하기 ( 계속 ) Import x 52
모바일용기본지도생성하기 ( 계속 ) Add Implement methods 53
모바일용기본지도생성하기 ( 계속 ) API KEY 설정 54
모바일용기본지도생성하기 ( 계속 ) AVD 실행 55
중심점, 레벨 (zoom) 변경 onmapviewsingletapped -> 지도를한번탭했을때 56
중심점, 레벨 (zoom) 변경 ( 계속 ) Tip! Move and zoom 동시에가능! onmapviewinitialized -> 지도초기화면 57
마커추가, 이벤트처리 onmapviewdoubletapped -> 지도를더블탭했을때 Tip! 다른이미지를마커로사용가능 58
마커추가, 이벤트처리 ( 계속 ) 59
선 (poly line) 그리기 onmapviewlongpressed -> 지도를길게눌렀을때 60
기타기능 현위치트래킹모드 지도화면중심을단말의현재위치로이동 나침반모드 단말의방향에따라지도화면이회전 -> 단말의현재위치필요 mapview.setcurrentlocationeventlistener(this); mapview.setcurrentlocationtrackingmode (MapView.CurrentLocationTrackingMode.TrackingModeOnWithHeading); // TrackingModeOnWithoutHeading, TrackingModeOff 61
Q&A 62