Daum MAP - Open API Youn-Hee Han

지도 API v3 시작하기  Desktop 환경 뿐만 아니라 Mobile 환경에서도 지도를 이용할 수 있도 록 경량화  API 사용자가 자유롭게 기능을 확장하여 이용할 수 있도록 설계  API v2 보다 용량을 줄이고 속도를 개선  참고 URL – 시작하기 : – 다음 지도 APIv3 레퍼런스 :

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

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

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

 기본 예제 ( 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( , ); 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 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( , ); }); 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 Daum 지도 API v3 예제 : 기본 중심점 이동하기 var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng( , ), level: 3 }); } function setInitialCenter() { map.setCenter(new daum.maps.LatLng( , )); } function setCenter() { map.setCenter(new daum.maps.LatLng( , )); } function panTo() { // 부드럽게 이동. 만약 이동할 거리가 지도 화면의 크기보다 클 경우 애니메이션 없이 이동 map.panTo(new daum.maps.LatLng( , )); } 초기 중심점 이동하기 중심점 이동하기 중심점 부드럽게 이동하기

 이미지 마커 예제 (1/2) ( 이미지 마커 9 Daum 지도 API v3 예제 : 이미지 마커 올리기 var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng( , ), level: 4 }); var points = [ new daum.maps.LatLng( , ), new daum.maps.LatLng( , ), new daum.maps.LatLng( , ), new daum.maps.LatLng( , ), new daum.maps.LatLng( , ) ];

 이미지 마커 예제 (2/2) ( 이미지 맵 참고 자료 Map icons collection 이미지 마커 10 var icon = new daum.maps.MarkerImage( ' 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

 인포윈도우 예제 (1/2) ( 인포 윈도우 12 Daum 지도 API v3 예제 : 인포윈도우 올리기 var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng( , ), level: 2 }); var marker = new daum.maps.Marker({ position: map.getCenter() }); marker.setMap(map);

 인포윈도우 예제 (2/2) ( 인포 윈도우 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( , ), content: ' 이곳은 교학관입니다. ' }); infowindow_only.open(map); }

 선, 원, 다각형 예제 (1/2) ( 선, 원, 다각형 on Map 14 Daum 지도 API v3 예제 : 선, 원, 폴리곤 올리기 var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng( , ), level: 5 }); // 라인 그리기 var line = new daum.maps.Polyline(); line.setPath([new daum.maps.LatLng( , ), new daum.maps.LatLng( , )]); line.setMap(map); // 원 그리기 var circle = new daum.maps.Circle({ center : new daum.maps.LatLng( , ), radius : 400, strokeWeight : 4, strokeColor : "#00ff00" }); circle.setMap(map);

 선, 원, 다각형 예제 (2/2) ( 선, 원, 다각형 on Map 15 // 폴리곤 그리기 var arr = []; arr.push(new daum.maps.LatLng( , )); arr.push(new daum.maps.LatLng( , )); arr.push(new daum.maps.LatLng( , )); arr.push(new daum.maps.LatLng( , )); 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 Daum 지도 API v3 예제 : 이벤트 이용하기 var map; function init() { map = new daum.maps.Map(document.getElementById('map'), { center: new daum.maps.LatLng( , ), 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

 로드뷰 예제 ( 로드뷰 생성 18 Daum 지도 API v3 예제 : 로드뷰 기본 생성하기 function init() { var p = new daum.maps.LatLng( , ); 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

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

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