DNA 포럼 API 서비스 모음 DNA Lens

지도 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/maps.js?apikey=DAUM_MAPS_DEMO_APIKEY"></script>
</head>
<body>
	<div id="map" style="width:600px;height:400px;"></div>
	<script type="text/javascript">
		var map = new DMap("map", {point:new DLatLng(37.48879895934866, 127.03130020103005), level:2}); 
	</script>
</body>
</html>

1. 기본 #

Daum Map을 불러오기 위한 가장 기본이 되는 코드다. 

   var map = new DMap("map", {point:new DLatLng(37.48879895934866, 127.03130020103005), level:2});

지도를 화면상에 표시하기 위해서는 DMap 개체를 선언해야 한다.
첫번째 파라미터는 실제 지도를 표시할 DOM개체로 일반적으로 DIV개체이다. 이는 객체 또는 문자열로 지정한다.
optional 파라미터로 point 값은 지도의 중심좌표를 나타낸다.
point값을 지정하지 않으면, default로 서울시청이 중심좌표값으로 표시된다.
두번째 optional 파라미터 level은 지도의 해상도를 결정한다.
level값을 지정하지 않았을 경우 default 값은 2이다.
다음 지도의 level은 기본 12단계로 0~11 단계가 존재한다. 숫자가 클 수록 더 높은 지도의 해상도를 보여준다.
[http]simple.html 예제

2. Map에서의 이동 #


다음은 맵의 중심을 이동하는 예제다. 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);

   window.setTimeout(function() { 
      map.panTo(new DLatLng(37.525586205674486, 126.91556295235934)); 
   }, 1000);
   // 확인가능하도록 1초간의 딜레이를 주었다.
[http]panto.html 예제

3. Control 추가하기 #


맵 확대컨트롤, 인덱스맵(미니맵)컨트롤을 추가할 수 있다. 

   
   var map = new DMap("map");
   map.setCenter(new DLatLng(37.48879895934866, 127.03130020103005), 2);
 
   map.addControl(new DIndexMapControl());
   map.addControl(new DZoomControl());
[http]control.html 예제

4. 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();
   });
[http]event.html 예제


5. 맵에 표시하기 #


DMap의 addOverlay 메소드를 사용하면 지도에 특정 표시를 할수 있다.
아래 예제는 random point를 가지고 alphabet 순서로 마킹된 아이콘들을 올린 예이다.
DIcon 객체를 사용하면 마커의 모양을 사용자 정의 이미지로 사용할 수 있다. 

  var map = new DMap("map");
  map.setCenter(new DLatLng(37.529196714213114, 126.92506196011036), 2);

  var icon = new DIcon("http://localimg.daum-img.net/localimages/07/2008/map/i_mks_b1.gif", new DSize(13, 16));

  for( var i=1; i<=10; i++){
    var x = Math.floor(Math.random()* 7000) - 3000;
    var y = Math.floor(Math.random()* 5000) - 2000;
    var offset = 0.000001;
    x = x * offset;
    y = y * offset;

    icon.src = "http://localimg.daum-img.net/localimages/07/2008/map/i_mks_b" + i+ ".gif";
    map.addOverlay(new DMark(new DLatLng(37.529196714213114 + x, 126.92506196011036 + y), {mark:icon})); // mark Overlay
  }
[http]icon.html 예제


6. 마커 제어하기 #


앞서 봤던 Mark 객체로 올린 마커에서 정보창을 출력할 수도있고 마커를 이동 가능하게 설정할 수도 있다.
Daum Map에서는 마지막 option 인자로써 이것을 제어한다. 


  var map = new DMap("map");
  map.setCenter(new DLatLng(37.529196714213114, 126.92506196011036), 2);

  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, draggable:true});
  map.addOverlay(m); // mark Overlay
[http]drag.html 예제


7. XML 읽어서 Mark 그리기 #

DDownloadUrl을 사용하여 xml url로 부터 정보를 받아 화면상에 Mark를 찍어보자.
WGS84 좌표체계의 구글 Maps기반 데이터를 읽어와서 Daum 지도 API에서 사용하고 있다. 

   var map = new DMap("map");
   map.setCenter(new DLatLng(37.529196714213114, 126.92506196011036), 2);
	
   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 클래스를 사용하여 좌표를 지정해준다.

[http]async.html 예제

8. Map의 모드 바꾸기 #

DMap 객체에서 제공하는 setMode 함수를 사용하여 지도의 동작모드를 손쉽게 조작할 수 있다. 

   var map = new DMap("map");

   map.setMode(0); //영역확대하기
   map.setMode(1); //기본 모드
   map.setMode(2); //클릭점 저장하기
   map.setMode(3); //면적재기
   map.setMode(4); //거리재기
   map.setMode(5); //선그리기
   map.setMode(6); //화살표 선그리기
   map.setMode(7); //원 그리기
   map.setMode(8); //사각형 그리기
   map.setMode(9); //텍스트 입력상자 넣기



9. 여러 DMark 객체들 중 특정한 DMark객체 조작 #

각 DMark 객체를 배열에 넣어두고, 특정 marker에 대한 조작을 할 수 있습니다. 여기서는 특정 marker의 infowindow를 두번 깜빡 거리게 합니다. 
function toggleOpenMark(mark_no)
{
	if(marks[mark_no].options.infowindow.isShow())
		marks[mark_no].options.infowindow.hide();
	else
		marks[mark_no].options.infowindow.show();
}


var map = new DMap("map");
map.setCenter(new DLatLng(37.529196714213114, 126.92506196011036), 2);
map.addControl(new DIndexMapControl());
map.addControl(new DZoomControl());

var marks = new Array(100);

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")));
		var marker_name = _marker[i].getAttribute("name");
		marks[i] = new DMark(point, { infowindow : new DInfoWindow(marker_name), draggable:true });
		map.addOverlay(marks[i]);
	}
	map.setCenter(point, 4);

});

setTimeout("toggleOpenMark(2)", 1000);
setTimeout("toggleOpenMark(2)", 2000);
setTimeout("toggleOpenMark(2)", 3000);
setTimeout("toggleOpenMark(2)", 4000);