DaumMap

Download Report

Transcript DaumMap 

Daum MAP - Open API
2012. 11
Youn-Hee Han
LINK@KOREATECH
http://link.koreatech.ac.kr
지도API v3 시작하기
 Desktop 환경 뿐만 아니라 Mobile 환경에서도 지도를 이용할 수 있
도록 경량화
 API 사용자가 자유롭게 기능을 확장하여 이용할 수 있도록 설계
 API v2 보다 용량을 줄이고 속도를 개선
 참고 URL
– 시작하기: http://dna.daum.net/apis/maps/intro
– 다음 지도 APIv3 레퍼런스: http://dna.daum.net/apis/maps/ref
LINK@KOREATECH
2
지도API v3 사양
 지도 종류
– 일반지도
– 스카이뷰
– 로드뷰
LINK@KOREATECH
3
지도API v3 사양
 브라우저 지원
–
–
–
–
–
Internet Explorer 6+
Mozilla Firefox 3+
Apple Safari 5+
Google Chrome 5+
Opera 10+
 모바일 기기 지원
– Apple iPhone/iPod
– Google Android
LINK@KOREATECH
4
지도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@KOREATECH
5
Hello World!
 기본 예제
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/HelloMap.html)
<!DOCTYPE html>
<html><head>
<title>Hello, World!</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no"> <!--모바일 환경에서 확대, 축소 기능을 제한 
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { width: 100%; height: 100% }
</style>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=KEY값"></script>
<script type="text/javascript">
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);
};
</script></head>
<body>
<div id="map"></div>
</body>
</html>
6
지도 컨트롤 올리기
 지도 컨트롤 예제
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MapControl.html)
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { width: 100%; height: 100% }
</style>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=KEY값"></script>
<script type="text/javascript">
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);
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:600px;height:600px;"></div>
</body>
</html>
7
중심점 이동
 중심점 이동 예제
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MoveMap.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daum 지도 API v3 예제: 기본 중심점 이동하기</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=KEY값" charset="utf-8"></script>
<script type="text/javascript">
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));
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:600px;height:600px;"></div>
<form>
<button type="button" onclick="setInitialCenter()">초기 중심점 이동하기</button>
<button type="button" onclick="setCenter()">중심점 이동하기</button>
<button type="button" onclick="panTo()">중심점 부드럽게 이동하기</button>
</form>
</body>
</html>
8
이미지 마커
 이미지 마커 예제 (1/2)
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/ImageMarker.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daum 지도 API v3 예제: 이미지 마커 올리기</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=key값" charset="utf-8"></script>
<script type="text/javascript">
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)
];
9
이미지 마커
 이미지 마커 예제 (2/2)
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/ImageMarker.html)
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);
}
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:600px;height:600px;"></div>
</body>
</html>
•
이미지 맵 참고 자료
 http://www.simnet.pe.kr/html/tutor-18.htm
•
Map icons collection
 http://mapicons.nicolasmollet.com/
10
이미지 마커
 이미지 마커 라이브러리 설명
11
인포 윈도우
 인포윈도우 예제 (1/2)
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/InfoWindow.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daum 지도 API v3 예제: 인포윈도우 올리기</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=key값" charset="utf-8"></script>
<script type="text/javascript">
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);
12
인포 윈도우
 인포윈도우 예제 (2/2)
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/InfoWindow.html)
var infowindow = new daum.maps.InfoWindow({
content: '<p style="margin:7px 22px 7px 12px;font:12px/1.5 sans-serif"><strong>안녕하세요
~</strong><br/>이곳은 한기대입니다.</p>',
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: '<p style="margin:7px 22px 7px 12px;font:12px/1.5 sans-serif">이곳은 교학관입니다.</p>'
});
infowindow_only.open(map);
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:600px;height:600px;"></div>
</body>
</html>
13
선, 원, 다각형 on Map
 선, 원, 다각형 예제 (1/2)
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/GraphicMap.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daum 지도 API v3 예제: 선, 원, 폴리곤 올리기</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=key값" charset="utf-8"></script>
<script type="text/javascript">
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);
14
선, 원, 다각형 on Map
 선, 원, 다각형 예제 (2/2)
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/GraphicMap.html)
//폴리곤 그리기
var arr = [];
arr.push(new daum.maps.LatLng(37.48879895934866,
arr.push(new daum.maps.LatLng(37.48979895934866,
arr.push(new daum.maps.LatLng(37.48279895934866,
arr.push(new daum.maps.LatLng(37.48879895934866,
var polygon = new daum.maps.Polygon({
strokeWeight : 3,
strokeColor : "#1833e5",
strokeOpacity : 0.6,
fillColor : "#1833e5",
fillOpacity : 0.2
});
polygon.setPath(arr);
polygon.setMap(map);
127.03250020103005));
127.03450020103005));
127.03350020103005));
127.03130020103005));
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:600px;height:400px;"></div>
</body>
</html>
15
이벤트 핸들링
 지도 이벤트 핸들링 예제
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MapEvent.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daum 지도 API v3 예제: 이벤트 이용하기</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=key값" charset="utf-8"></script>
<script type="text/javascript">
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() + "<br />마
우스-longitude: " + mouseEvent.latLng.getLng();
});
daum.maps.event.addListener(map,"dragend",function(){
var center = map.getCenter();
document.getElementById("message2").innerHTML = "지도중심-latitude : " + center.getLat() + "<br />지도중심longitude: " + center.getLng();
});
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:600px;height:400px;"></div>
<div id="message1" style="font-size:12px;width:590px;height:30px;border:solid 1px black;padding:5px;"></div>
<div id="message2" style="font-size:12px;width:590px;height:30px;border:solid 1px black;padding:5px;"></div>
</body>
</html>
16
이벤트 핸들링
 지도 이벤트 설명
17
로드뷰 생성
 로드뷰 예제
(http://link.koreatech.ac.kr/courses/2012_2/WSC/Examples/MapEvent.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Daum 지도 API v3 예제: 로드뷰 기본 생성하기</title>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=key값" charset="utf-8"></script>
<script type="text/javascript">
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);
});
}
</script>
</head>
<body onload="init()">
<div id="roadview" style="width:600px;height:400px;"></div>
</body>
</html>
18
로드뷰 생성
 로드뷰 설명
19
[실습]
 한국기술교육대학교 캠퍼스맵 만들기
– 한 페이지에 1)캠퍼스맵 지도와 2)로드뷰 화면 구성
– 캡퍼스맵 요구사항
• 참고:
http://www.kut.ac.kr/kor/new_2010/sub.jsp?l_menu=01&m_menu=01&s_m
enu=06&j_menu=01
• 위 참고 캠퍼스맵에 나타나 있는 지역 중 중요한 지역 7~10개 정도를 정하여
마커 및 사용자오버레이 이용한 인포메이션 추가
• 학교 정문에서 4공학관을 찾아올 수 있는 길을 “선” 및 “원”등을 이용하여 표
시
– 로드뷰 요구사항
• 캠퍼스맵에서 특정지역을 클릭하면 로드뷰도 그 지역을 중심으로 화면 변화
20
[실습]
 한국기술교육대학교 캠퍼스맵 만들기 - Example
클릭!
21