이 문서의 내용은 더 이상 기술 지원을 하지 않습니다. 지도API v3을 사용하세요.
이 문서는 Daum 지도 API 2.0 기준으로 제작되었으며, Daum 지도 API를 사용하는 Sample 소스를 제공합니다.지도 API 시작 하기
지도 기본 예제
지도 응용 예제
로드뷰 사용 예제
지도 API 시작 하기
지도 Key 발급
지도 API의 사용에 앞서 키를 발급 받는다. 키를 발급 받게 되면 아래와 같은 코드로 지도API를 이용할 수 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>다음 지도API 테스트 페이지 </title>
<Script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=DAUM_MAPS_DEMO_APIKEY"></script>
</head>
<body>
<div id="map"></div>
<Script type="text/javascript">
var map = new DMap("map", {point:new DLatLng(37.48879895934866, 127.03130020103005), level:2});
</script>
</body>
</html>
지도 기본 예제
지도 생성하기
var map = new DMap("map", {point:new DLatLng(37.48879895934866,127.03130020103005), level:2});
지도를 화면상에 표시하기 위해서는 DMap 개체를 선언해야 한다.
첫번째 파라미터는 실제 지도를 표시할 DOM개체로 일반적으로 DIV개체이다. 이는 객체 또는 문자열로 지정한다.
두번째 파라미터의 point값은 지도의 중심좌표를 나타낸다.
point값을 지정하지 않으면, default로 서울시청이 중심좌표값으로 표시된다.
(데모페이지의 "1.지도 좌표 얻어오기 Demo"를 통하여 지도생성에 필요한 좌표를 쉽게 구할 수 있다.)
level은 지도의 확대/축소 정도를 지정하며, 값이 없을 경우 default는 3이다.
다음 지도의 level은 일반 지도는 2~14, 스카이뷰는 0~14 단계가 존재하며 숫자가 클 수록 더 넓은 영역을 보여준다.
지도 Control 추가하기
지도 위에 지도 확대/축소 컨트롤, 인덱스맵(미니맵)컨트롤,맵 타입 컨트롤을 추가할 수 있다. 컨트롤은 setAlign(), setVAlign()과 같은 함수를 사용하여 원하는 위치에 배치할 수 있다. setAlign : left,right,center setVAlign : top,middle,bottom
var map = new DMap("map");
var indexMapControl = new DIndexMapControl();
var zoomControl = new DZoomControl();
var mapTypeControl = new DMapTypeControl()
map.addControl(indexMapControl);
map.addControl(zoomControl);
map.addControl(mapTypeControl);
indexMapControl.setAlign("left");
zoomControl.setVAlign("middle");
지도에 마커 표시하기
DMark를 사용하여 지도에 특정 표시를 할 수 있다. DMark 개체를 생성하고 addOverlay 메소드를 사용하여 지도에 표시를 한 예이다.
var map = new DMap("map");
map.setCenter(new DLatLng(37.529196714213114, 126.92506196011036), 2);
var m = new DMark(new DLatLng(37.529196714213114, 126.92506196011036));
map.addOverlay(m);
지도에 정보창 표시하기
infowindow는 새로운 정보창 개체를 생성한다. 마커와 같이 지도에 addOverlay 할 수도 있고, 마커의 정보창으로도 사용할 수도 있다. 아래는 마커에 정보창을 올린 예이다.
var map = new DMap("map");
var iw = new DInfoWindow("http://local.daum.net/localn/include/cms_map.html", {width:270, height:160});
var m = new DMark(new DLatLng(37.529196714213114, 126.92506196011036), {infowindow:iw});
map.addOverlay(m);
지도 응용 예제
XML 읽어서 마커 표시하기
DDownloadUrl을 사용하여 xml url로 부터 정보를 받아 화면상에 Mark를 찍어보자. WGS84 좌표체계의 구글 Maps기반 데이터를 읽어와서 Daum 지도 API에서 사용하고 있다.
var map = new DMap("map");
DDownloadUrl("coord/data.xml", function(_xml){
var _marker = _xml.getElementsByTagName("marker");
for (var i = 0; i < _marker.length; i++){
var point = new DLatLng(parseFloat(_marker[i].getAttribute("lat")), parseFloat(_marker[i].getAttribute("lng")));
map.addOverlay(new DMark(point, { infowindow : new DInfoWindow(_marker[i].getAttribute("name")), draggable:true }));
}
map.setCenter(point, 4);
});
- DDownloadUrl의 handler function에서 첫번째 인자로 XML의 document가 넘어온다.
- 구글맵의 lat, lng의 좌표는 WGS84 좌표계 이므로 DLatLng 클래스를 사용하여 좌표를 지정해준다.
최대/최소 좌표값을 사용하여 지도 범위 설정하기
최대/최소 좌표값을 사용하여 지도의 범위를 설정할 수 있다. 아래 예는 여러개의 좌표에 마커를 올리고 마커들이 지도 위에 모두 나타날 수 있도록 지도 범위를 설정한다.
var maps = new DMap("map", {point: new DLatLng(37.529257714213114, 126.92520196011036), level:3});
// points의 최소 x,y값과 최대 x, y값을 얻어오는 함수
function getBound(points){
var min = new DPoint(points[0].x, points[0].y);
var max = new DPoint(points[0].x, points[0].y);
daum.Array.each(points, function(e){
if(e.x < min.x) min.x = e.x;
if(e.x > max.x) max.x = e.x;
if(e.y < min.y) min.y = e.y;
if(e.y > max.y) max.y = e.y;
});
return {
minPoint : min,
maxPoint : max
};
};
// 좌표값들 지정
var points = new Array();
points[0] = new DLatLng(37.529196714213114, 126.92506196011036);
points[1] = new DLatLng(37.529197714213114, 127.17546196011036);
points[2] = new DLatLng(37.529217714213114, 126.92526196011036);
points[3] = new DLatLng(37.529257714213114, 126.92520196011036);
points[4] = new DLatLng(37.530257714213114, 126.92530196011036);
// 해당 좌표에 marker 올리기
for(var i = 0; i < points.length; i++)
{
maps.addOverlay(new DMark(points[i]));
}
// 최소, 최대 좌표 얻어오기
var b = getBound(points);
// 지도에 최소, 최대값 지정
maps.setBound(b.minPoint.x, b.minPoint.y, b.maxPoint.x, b.maxPoint.y);
라인, 원, 폴리곤 그리기
여러가지 그래픽 요소들을 지도에 올릴 수 있다. DLine,DCircle,DPolygon을 이용하여 원하는 위치에 그래픽 요소들을 그린 후, addOverlay함수를 사용하여 지도상에 그래픽 요소들을 올릴 수 있다. 아래는 라인, 원, 폴리곤을 그리는 예이다.
var map = new DMap("map", {point:new DLatLng(37.48779895934866, 127.03130020103005), level:5});
var line = new DLine(new DLatLng(37.48779895934866, 127.03130020103005), new DLatLng(37.48979895934866, 127.04130020103005));
map.addOverlay(line);
var spoint = new DLatLng(37.48179895934866, 127.03030020103005);
var epoint = new DLatLng(37.48979895934866, 127.02110020103005);
var circle = new DCircle(spoint, epoint, {strokeColor:"#00ff00",strokeWeight:4} );
map.addOverlay(circle);
var arr = [];
arr.push(new DLatLng(37.48879895934866, 127.03250020103005));
arr.push(new DLatLng(37.48979895934866, 127.03450020103005));
arr.push(new DLatLng(37.48279895934866, 127.03350020103005));
arr.push(new DLatLng(37.48879895934866, 127.03130020103005));
var polygon = new DPolygon(arr);
map.addOverlay(polygon);
지도 중심점 변환하기
다음은 지도의 중심을 이동하는 예제다. setCenter 함수를 사용하면 지정한 좌표로 지도를 바로 이동시키고 panTo 함수를 사용하면 해당 중심으로 지도를 부드럽게 이동시킨다.
var map = new DMap("map", {point:new DLatLng(37.48879895934866,127.03130020103005), level:2});
map.setCenter(new DLatLng(37.48879895934866, 127.03130020103005), 2);
map.panTo(new DLatLng(37.525586205674486, 126.91556295235934));
Event 추가하기
사용자 이벤트는 DEvent.addListener를 호출해서 생성한다. 이것은 지도 혹은 마커,정보창 등에서 발생하는 이벤트를 처리할 수 있도록 한다. 아래의 예제에서 맵을 움직일 경우 변경된 좌표가 출력되는 것을 확인할 수 있다.
var map = new DMap("map");
map.setCenter(new DLatLng(37.529196714213114, 126.92506196011036), 2);
DEvent.addListener(map, "move", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = "latitude : " + center.getLat() + " longitude: " + center.getLng();
});
로드뷰 생성하기 
로드뷰를 사용하기 위한 가장 기본이 되는 코드다.
var rv = new DRoadView("roadview",{point : new DLatLng(37.529196714213114, 126.92506196011036)})
로드뷰를 화면상에 표시하기 위해서는 DRoadView 개체를 선언해야 한다.
첫번째 파라미터는 실제 지도를 표시할 DOM개체로 일반적으로 DIV개체이다. 이는 객체 또는 문자열로 지정한다.
두번째 파라미터의 point 값은 지도의 중심좌표를 나타낸다.
point값을 지정하지 않으면, default로 서울시청이 중심좌표값으로 표시된다.
이 외에도 수평각(pan),수직각(tilt),확대/축소 레벨(zoom)등의 옵션을 넣을 수 있다.
(데모페이지의 "2.로드뷰 정보 얻어오기 Demo"를 통하여 로드뷰 생성에 필요한 정보를 쉽게 구할 수 있다.)
로드뷰는 수직각,수평각 및 zoom 값을 사용하여 원하는 로드뷰 상의 특정 지점를 볼 수 있다.
var latlng = new DLatLng(37.529196714213114, 126.92506196011036);
var opt = {point:latlng,width:600,height:400,pan:10,tilt:-30,zoom:2};
var rv = new DRoadView("roadview",opt);
로드뷰 이벤트 사용하기
DEvent.addListener를 사용하여 로드뷰에 이벤트를 등록할 수 있다. 아래 예는 로드뷰의 화살표를 클릭하여 이동했을 때 발생하는 move이벤트를 사용하여, 로드뷰에서 이동된 현재 좌표를 받아온다.
var opt = {width:600,height:400,pan:40,tilt:-10,zoom:-2};
var rv = new DRoadView("roadview",opt);
DEvent.addListener(rv,"move",function(point){alert(point.x+","+point.y+"로 이동했습니다.")});
로드뷰가 촬영된 파란 라인을 지도에 표시하기
아래 예는 DRoadViewOverlay를 이용하여 지도 위에 로드뷰 서비스 이용가능 지역의 파란 라인을 활성화한다.
var map = new DMap("maps");
var ov = new DRoadViewOverlay(map);