Daum MAP - Open API 2012. 11 Youn-Hee Han

Presentation on theme: "Daum MAP - Open API 2012. 11 Youn-Hee Han"— Presentation transcript:

1 Daum MAP - Open API 2012. 11 Youn-Hee Han LINK@KOREATECH http://link.koreatech.ac.kr

2 지도 API v3 시작하기  Desktop 환경 뿐만 아니라 Mobile 환경에서도 지도를 이용할 수 있도 록 경량화  API 사용자가 자유롭게 기능을 확장하여 이용할 수 있도록 설계  API v2 보다 용량을 줄이고 속도를 개선  참고 URL – 시작하기 : http://dna.daum.net/apis/maps/introhttp://dna.daum.net/apis/maps/intro – 다음 지도 APIv3 레퍼런스 : http://dna.daum.net/apis/maps/refhttp://dna.daum.net/apis/maps/ref LINK@KOREATECH2

3 지도 API v3 사양  지도 종류 – 일반지도 – 스카이뷰 – 로드뷰 LINK@KOREATECH3

4 지도 API v3 사양  브라우저 지원 –Internet Explorer 6+ –Mozilla Firefox 3+ –Apple Safari 5+ –Google Chrome 5+ –Opera 10+  모바일 기기 지원 –Apple iPhone/iPod –Google Android LINK@KOREATECH4

5 지도 API v3 사양  좌표계 –WGS84: 위도 / 경도 좌표계 –KoreaTech 의 위도와 경도 위도 : 36.76419177390199 경도 : 127.28171825408936 –Google Map 을 활용하여 특정 위치의 위도와 경도 알아내기 1) http://map.google.co.kr 에서 찾고자 하는 위치로 이동한다. 2) 마우스 오른쪽 버튼을 이용해서 ' 지도중앙으로 설정 ' 을 눌러서 찾고자 하는 위치를 중앙으로 옮긴다. 2) URL 입력창에 아래 javascript 코드를 입력한다.  javascript:void(prompt("",gApplication.getMap().getCenter())); 3) 아래와 같은 내용으로 prompt 창에 위도, 경도가 나타난다.  (35.850969941714254, 128.6254459619522) LINK@KOREATECH5

6  기본 예제 (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/HelloMap.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/HelloMap.html Hello World! 6 Hello, World! <!-- 모바일 환경에서 확대, 축소 기능을 제한  html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map { width: 100%; height: 100% } window.onload = function() { var position = new daum.maps.LatLng(36.76419177390199, 127.28171825408936); var map = new daum.maps.Map(document.getElementById('map'), { center: position, level: 4, // 0 부터 14 까지의 값이며, 숫자가 작을 수록 확대됨 mapTypeId: daum.maps.MapTypeId.HYBRID // ROADMAP, SKYVIEW, HYBRID }); var marker = new daum.maps.Marker({ position: position }); marker.setMap(map); var infowindow = new daum.maps.InfoWindow({ content: 'Hello, World!' }); infowindow.open(map, marker); };

7  지도 컨트롤 예제 (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MapControl.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MapControl.html 지도 컨트롤 올리기 7 Hello, World! html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map { width: 100%; height: 100% } var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng(36.76419177390199, 127.28171825408936); }); var zoomControl = new daum.maps.ZoomControl(); map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT); var mapTypeControl = new daum.maps.MapTypeControl(); map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT); }

8  중심점 이동 예제 (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MoveMap.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MoveMap.html 중심점 이동 8 Daum 지도 API v3 예제 : 기본 중심점 이동하기 var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng(36.76419177390199, 127.28171825408936), level: 3 }); } function setInitialCenter() { map.setCenter(new daum.maps.LatLng(36.76419177390199, 127.28171825408936)); } function setCenter() { map.setCenter(new daum.maps.LatLng(37.53723910162246, 127.003362714821)); } function panTo() { // 부드럽게 이동. 만약 이동할 거리가 지도 화면의 크기보다 클 경우 애니메이션 없이 이동 map.panTo(new daum.maps.LatLng(37.53730198471141, 127.00744728571883)); } 초기 중심점 이동하기 중심점 이동하기 중심점 부드럽게 이동하기

9  이미지 마커 예제 (1/2) (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/ImageMarker.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/ImageMarker.html 이미지 마커 9 Daum 지도 API v3 예제 : 이미지 마커 올리기 var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng(37.537123, 127.005523), level: 4 }); var points = [ new daum.maps.LatLng(37.538779843072824,127.00200500605618), new daum.maps.LatLng(37.538635699652154,127.00030778301571), new daum.maps.LatLng(37.537338259427315,126.9998325645435), new daum.maps.LatLng(37.53377026138633,127.00288736856231), new daum.maps.LatLng(37.534941239454476,127.00920075758009) ];

10  이미지 마커 예제 (2/2) (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/ImageMarker.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/ImageMarker.html 이미지 맵 참고 자료 http://www.simnet.pe.kr/html/tutor-18.htm Map icons collection http://mapicons.nicolasmollet.com/ 이미지 마커 10 var icon = new daum.maps.MarkerImage( 'http://localimg.daum-img.net/localimages/07/2009/map/icon/blog_icon01_on.png', new daum.maps.Size(31,34), new daum.maps.Point(16,34), "poly", // 마커의 클릭 가능한 영역의 모양 "1,20,1,9,5,2,10,0,21,0,27,3,30,9,30,20,17,33,14,33“// 마커의 클릭 가능한 영역을 표현하는 좌표값 ); for(var i = 0; i < points.length; i++) { new daum.maps.Marker({ position: points[i], image: icon }).setMap(map); }

11  이미지 마커 라이브러리 설명 이미지 마커 11

12  인포윈도우 예제 (1/2) (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/InfoWindow.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/InfoWindow.html 인포 윈도우 12 Daum 지도 API v3 예제 : 인포윈도우 올리기 var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng(36.76419177390199, 127.28171825408936), level: 2 }); var marker = new daum.maps.Marker({ position: map.getCenter() }); marker.setMap(map);

13  인포윈도우 예제 (2/2) (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/InfoWindow.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/InfoWindow.html 인포 윈도우 13 var infowindow = new daum.maps.InfoWindow({ content: ' 안녕하세요 ~ 이곳은 한기대입니다. ', removable : true }); daum.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); var infowindow_only = new daum.maps.InfoWindow({ position: new daum.maps.LatLng(36.76519177390199, 127.28171825408936), content: ' 이곳은 교학관입니다. ' }); infowindow_only.open(map); }

14  선, 원, 다각형 예제 (1/2) (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/GraphicMap.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/GraphicMap.html 선, 원, 다각형 on Map 14 Daum 지도 API v3 예제 : 선, 원, 폴리곤 올리기 var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng(37.48779895934866, 127.03130020103005), level: 5 }); // 라인 그리기 var line = new daum.maps.Polyline(); line.setPath([new daum.maps.LatLng(37.48779895934866, 127.03130020103005), new daum.maps.LatLng(37.48979895934866, 127.04130020103005)]); line.setMap(map); // 원 그리기 var circle = new daum.maps.Circle({ center : new daum.maps.LatLng(37.48579895934866, 127.02530020103005), radius : 400, strokeWeight : 4, strokeColor : "#00ff00" }); circle.setMap(map);

15  선, 원, 다각형 예제 (2/2) (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/GraphicMap.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/GraphicMap.html 선, 원, 다각형 on Map 15 // 폴리곤 그리기 var arr = []; arr.push(new daum.maps.LatLng(37.48879895934866, 127.03250020103005)); arr.push(new daum.maps.LatLng(37.48979895934866, 127.03450020103005)); arr.push(new daum.maps.LatLng(37.48279895934866, 127.03350020103005)); arr.push(new daum.maps.LatLng(37.48879895934866, 127.03130020103005)); var polygon = new daum.maps.Polygon({ strokeWeight : 3, strokeColor : "#1833e5", strokeOpacity : 0.6, fillColor : "#1833e5", fillOpacity : 0.2 }); polygon.setPath(arr); polygon.setMap(map); }

16  지도 이벤트 핸들링 예제 (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MapEvent.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MapEvent.html 이벤트 핸들링 16 Daum 지도 API v3 예제 : 이벤트 이용하기 var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng(37.537123, 127.005523), level: 3 }); daum.maps.event.addListener(map,"mousemove",function(mouseEvent){ document.getElementById("message1").innerHTML = " 마우스 -latitude : " + mouseEvent.latLng.getLat() + " 마우스 -longitude: " + mouseEvent.latLng.getLng(); }); daum.maps.event.addListener(map,"dragend",function(){ var center = map.getCenter(); document.getElementById("message2").innerHTML = " 지도중심 -latitude : " + center.getLat() + " 지도중심 - longitude: " + center.getLng(); }); }

17  지도 이벤트 설명 이벤트 핸들링 17

18  로드뷰 예제 (http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MapEvent.html)http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MapEvent.html 로드뷰 생성 18 Daum 지도 API v3 예제 : 로드뷰 기본 생성하기 function init() { var p = new daum.maps.LatLng(36.76419177390199, 127.28171825408936); var rc = new daum.maps.RoadviewClient(); var rv = new daum.maps.Roadview(document.getElementById("roadview")); rc.getNearestPanoId(p, 50, function(panoid) { rv.setPanoId(panoid, p); }); }

19  로드뷰 설명 로드뷰 생성 19

20 [ 실습 ]  한국기술교육대학교 캠퍼스맵 만들기 – 한 페이지에 1) 캠퍼스맵 지도와 2) 로드뷰 화면 구성 – 캡퍼스맵 요구사항 참고 : http://www.kut.ac.kr/kor/new_2010/sub.jsp?l_menu=01&m_menu=01&s_men u=06&j_menu=01 http://www.kut.ac.kr/kor/new_2010/sub.jsp?l_menu=01&m_menu=01&s_men u=06&j_menu=01 위 참고 캠퍼스맵에 나타나 있는 지역 중 중요한 지역 7~10 개 정도를 정하여 마커 및 사용자오버레이 이용한 인포메이션 추가 학교 정문에서 4 공학관을 찾아올 수 있는 길을 “ 선 ” 및 “ 원 ” 등을 이용하여 표시 – 로드뷰 요구사항 캠퍼스맵에서 특정지역을 클릭하면 로드뷰도 그 지역을 중심으로 화면 변화 20

21 [ 실습 ]  한국기술교육대학교 캠퍼스맵 만들기 - Example 21 클릭 !