Maps API Map sdohtme stnev E About 지도 객체 Guide Sample Constructor Docs Wizard News daum.maps.map(container, options) 지도를 생성한다. 지도 생성하기 샘플보기 var cont ainer = document.get Element ById('map'), options = { cent er: new daum.maps.lat Lng(33.450701, 126.570667), level: 3 }; var map = new daum.maps.map(cont ainer, opt ions); cont ainer Node : 지도가 표시될 HTML element opt ions Object cent er LatLng : 중심 좌표 (필수) level Number : 확대 수준 (기본값: 3) maptypeid MapTypeId : 지도 종류 (기본값: 일반 지도) draggable Boolean : 마우스 드래그, 휠, 모바일 터치를 이용한 시점 변 경(이동, 확대, 축소) 가능 여부 scrollwheel Boolean : 마우스 휠, 모바일 터치를 이용한 확대 및 축소 가능 여부 disabledoubleclick Boolean : 더블클릭 이벤트 및 더블클릭 확대 가능 여부 disabledoubleclickzoom Boolean : 더블클릭 확대 가능 여부 project ionid String : 투영법 지정 (기본값: daum.maps.project ionid.wcong) tileanimation Boolean : 지도 타일 애니메이션 설정 여부 (기본값: true) keyboardshort cut s Boolean Object : 키보드의 방향키와 +, 키로 1/124
지도 이동,확대,축소 가능 여부 (기본값: false) speed Number : 지도 이동 속도 Methods setcenter(latlng) 지도의 중심 좌표를 설정한다. 지도 이동시키기 샘플보기 map.set Cent er(new daum.maps.lat Lng(37.537183, 127.005454)); lat lng LatLng getcenter() 지도의 중심 좌표를 반환한다. 지도 정보 얻어오기 샘플보기 var posit ion = map.get Cent er(); Lat Lng setlevel(level, options) 지도의 확대 수준을 설정한다. MapTypeId 의 종류에 따라 설정 범위가 다르다. SKYVIEW, HYBRID 일 경우 0 ~ 14, ROADMAP 일 경우 1 ~ 14. 지도 레벨바꾸기 샘플보기 // 지도 레벨을 4로 설정한다 map.set Level(4); // 지도 레벨을 4로 설정하고 특정 좌표를 기준으로 확대 또는 축소되도록 한다 map.set Level(4, {anchor: new daum.maps.lat Lng(33.450705, 126.570677) 2/124
// setlevel 시 애니메이션 효과 옵션 설정, 기본지속시간은 300ms이다 map.set Level(4, {animat e: true // setlevel 시 애니메이션 효과의 지속시간을 500ms로 설정 map.setlevel(4, { animate: { durat ion: 500 } level Number opt ions Object animate Boolean Object : 지도 확대수준 변경 시 애니메이션 효과 여 부 (현재 지도 레벨과의 차이가 2 이하인 경우에만 애니메이션 효과 가능) duration Number : 애니메이션 효과 지속 시간 (단위: ms) anchor LatLng : 지도 확대수준 변경 시 기준 좌표 getlevel() 지도의 확대 수준을 반환한다. 지도 정보 얻어오기 샘플보기 var level = map.get Level(); Number setmaptypeid(maptypeid) 지도의 타입을 설정한다. 지도 타입 바꾸기1 샘플보기 지도 타입 바꾸기2 샘플보기 map.set MapTypeId(daum.maps.MapTypeId.HYBRID); 3/124
maptypeid MapTypeId getmaptypeid() 지도의 타입을 반환한다. 지도 정보 얻어오기 샘플보기 map.get MapTypeId(); // daum.maps.maptypeid.roadmap MapTypeId setbounds(bounds[, paddingtop, paddingright, paddingbottom, paddingleft]) 주어진 영역이 화면 안에 전부 나타날 수 있도록 지도의 중심 좌표와 확대 수준을 설 정한다. 주어진 영역외에 추가로 padding값을 지정할 수 있다. 2번째 파라메터부터 top, right, bottom, left값이며 파라메터를 1개 이상 지정한 경우 지정하지 않은 파라메터에 대해서는 CSS의 padding rule을 따른다. (ex. paddingtop:100, paddingright:50 을 지정한 경우. t op, right, bot t om, left 순서로 100 50 100 50) padding값을 지정하지 않으면 기본값으로 상하좌우 32가 적용된다. 지도 범위 재설정 하기 샘플보기 map.set Bounds(bounds); bounds LatLngBounds paddingtop Number paddingright Number paddingbot t om Number paddingleft Number 4/124
getbounds() 지도의 영역을 반환한다. 지도 정보 얻어오기 샘플보기 var bounds = map.get Bounds(); bounds.t ost ring(); // "((33.44843745687413, 126.56798357402302), (33.4529 64008206735, 126.57333898904454))" LatLngBounds panby(dx, dy) 중심 좌표를 지정한 픽셀 만큼 부드럽게 이동한다. 만약 이동할 거리가 지도 화면의 크기보다 클 경우 애니메이션 없이 이동한다. map.panby(100, 50); dx Number dy Number panto(latlng_or_bounds[, padding]) 중심 좌표를 지정한 좌표 또는 영역으로 부드럽게 이동한다. 필요하면 확대 또는 축 소도 수행한다. 만약 이동할 거리가 지도 화면의 크기보다 클 경우 애니메이션 없이 이동한다. padding 만큼 제외하고 영역을 계산하며, padding 을 지정하지 않으면 기본값으로 32가 사용된다. 지도 이동시키기 샘플보기 var movelatlng = new daum.maps.latlng(33.450580, 126.574942); map.panto(movelat Lng); 5/124
lat lng_or_bounds LatLng LatLngBounds padding Number addcontrol(control, position) 지도에 컨트롤을 추가한다. 지도에 컨트롤 올리기 샘플보기 var cont rol = new daum.maps.zoomcont rol(); map.addcont rol(cont rol, daum.maps.cont rolposit ion.topright); cont rol MapTypeControl ZoomControl posit ion ControlPosition removecontrol(control) 지도에서 컨트롤을 제거한다. map.removecont rol(cont rol, daum.maps.cont rolposit ion.topright); cont rol MapTypeControl ZoomControl setdraggable(draggable) 마우스 드래그와 모바일 터치를 이용한 지도 이동 가능 여부를 설정한다. 지도 이동 막기 샘플보기 map.set Draggable(false); draggable Boolean 6/124
getdraggable() 마우스 드래그와 모바일 터치를 이용한 지도 이동 가능 여부를 반환한다. // 지도가 드래그로 이동이 가능한 상태면 true, 아니면 false를 반환한다. map.get Draggable(); Boolean setzoomable(zoomable) 마우스 휠과 모바일 터치를 이용한 지도 확대, 축소 가능 여부를 설정한다. 지도 객체 함수 호출을 통한 확대, 축소는 동작한다. 지도 확대 축소 막기 샘플보기 // 지도의 마우스 휠, 모바일 터치를 이용한 확대, 축소 기능을 막는다. map.set Zoomable(false); // 지도 객체 함수 호출을 통한 확대, 축소는 동작한다. map.set Level(3); zoomable Boolean getzoomable() 마우스 휠과 모바일 터치를 이용한 지도 확대, 축소 가능 여부를 반환한다. // 지도가 마우스 휠과 모바일 터치를 이용해 확대, 축소가 가능한 상태이면 true, 아니면 false를 반환한다. map.get Zoomable(); Boolean 7/124
setprojectionid(projectionid) Daum-Open-API-Reference_http://dna.daum.net 지도의 project ionid를 지정한다. 이 메소드로 API 내부의 좌표계의 투영 방법을 설정할 수 있다. 기본값은 daum.maps.project ionid. WCONG // API 내부의 좌표게가 특정 투영법을 사용하지 않도록 할 경우. map.set Project ionid(daum.maps.project ionid.none); project ionid ProjectionId getprojectionid() 지도의 project ionid를 반환한다. map.get Project ionid(); Project ionid relayout() 지도를 표시하는 HTML elemente의 크기를 변경한 후에는 반드시 이 함수를 호 출해야 한다. 단, window의 resize 이벤트에 대해서는 자동으로 호출한다. 지도 영역 크기 동적 변경하기 샘플보기 var cont ainer = document.get Element ById('map'), options = { cent er: new daum.maps.lat Lng(33.450701, 126.570667), level: 3 }; var map = new daum.maps.map(cont ainer, opt ions); cont ainer.st yle.widt h = '1200px'; cont ainer.st yle.height = '800px'; 8/124
map.relayout(); addoverlaymaptypeid(maptypeid) 지도에 로드뷰, 교통정보 등의 오버레이 타입의 타일 이미지를 올린다. 로드뷰 타일 이미지를 추가할 경우 RoadviewOverlay 와 동일한 기능을 수행한다. 지도에 교통정보 표시하기 샘플보기 지도에 로드뷰 도로 표시하기 샘플보기 지도에 지형도 표시하기 샘플보기 map.addoverlaymaptypeid(daum.maps.maptypeid.traffic); maptypeid MapTypeId removeoverlaymaptypeid(maptypeid) 지도에 로드뷰, 교통정보 등의 오버레이 타입의 타일 이미지를 삭제한다. map.removeoverlaymaptypeid(daum.maps.maptypeid.traffic); maptypeid MapTypeId setkeyboardshortcuts(active) 키보드의 방향키와 +,-키로 지도 이동,확대,축소 가능여부를 설정한다. // 키보드로 지도를 조작할 수 없도록 설정한다 map.set KeyboardShort cut s(false); act ive Boolean 9/124
getkeyboardshortcuts() 키보드의 방향키와 +,-키로 지도 이동,확대,축소 가능여부를 반환한다. // true를 반환하면 현재 지도를 키보드로 조작할 수 있는 상태이다 map.get KeyboardShort cut s(); Boolean setcopyrightposition(copyrightposition[, reversed]) copyright 의 위치를 설정한다 // copyright의 위치를 오른쪽 아래로 설정하고, 로고와의 위치를 반전시킨다 // 실행 결과는 아래 이미지와 같다 map.set Copyright Posit ion(daum.maps.copyright Posit ion.bottomright, true) ; copyright Posit ion CopyrightPosition reversed Boolean getprojection() 지도의 좌표 변환 객체를 반환한다. var proj = map.get Project ion(); 10/124
MapProject ion Events center_changed 중심 좌표가 변경되면 발생한다. 중심좌표 변경 이벤트 등록하기 샘플보기 daum.maps.event.addlist ener(map, 'cent er_changed', functio n() { alert('center changed!'); zoom_start 확대 수준이 변경되기 직전 발생한다. daum.maps.event.addlist ener(map, 'zoom_st art', functio n() { alert('map is going to zoom!'); zoom_changed 확대 수준이 변경되면 발생한다. 확대, 축소 이벤트 등록하기 샘플보기 daum.maps.event.addlistener(map, 'zoom_changed', function() { alert('zoom changed!'); bounds_changed 지도 영역이 변경되면 발생한다. 영역 변경 이벤트 등록하기 샘플보기 11/124
daum.maps.event.addlistener(map, 'bounds_changed', function() { alert('bounds changed!'); click 지도를 클릭하면 발생한다. 클릭 이벤트 등록하기 샘플보기 클릭한 위치에 마커 표시하기 샘플보기 daum.maps.event.addlist ener(map, 'click', functio n(mouseevent) { var lat lng = mouseevent.lat Lng; alert('click! ' + latlng.tostring()); Arguments MouseEvent dblclick 지도를 더블클릭하면 발생한다. daum.maps.event.addlist ener(map, 'dblclick', functio n(mouseevent) { var lat lng = mouseevent.lat Lng; alert('double click! ' + latlng.tostring()); Arguments MouseEvent rightclick 지도를 마우스 오른쪽 버튼으로 클릭하면 발생한다. 12/124
daum.maps.event.addlist ener(map, 'right click', functio n(mouseevent) { var lat lng = mouseevent.lat Lng; alert('right click! ' + latlng.tostring()); Arguments MouseEvent mousemove 지도에서 마우스 커서를 이동하면 발생한다. daum.maps.event.addlist ener(map, 'mousemove', functio n(mouseevent) { // do something Arguments MouseEvent dragstart 드래그를 시작할 때 발생한다. daum.maps.event.addlist ener(map, 'dragst art', functio n() { // do something drag 드래그를 하는 동안 발생한다. daum.maps.event.addlistener(map, 'drag', function() { // do something 13/124
dragend 드래그가 끝날 때 발생한다. daum.maps.event.addlistener(map, 'dragend', function() { // do something idle 중심 좌표나 확대 수준이 변경되면 발생한다. 단, 애니메이션 도중에는 발생하지 않는다. daum.maps.event.addlistener(map, 'idle', function() { // do something tilesloaded 확대수준이 변경되거나 지도가 이동했을때 타일 이미지 로드가 모두 완료되면 발생 한다. 지도이동이 미세하기 일어나 타일 이미지 로드가 일어나지 않은경우 발생하지 않는 다. 타일로드 이벤트 등록하기 샘플보기 daum.maps.event.addlist ener(map, 't ilesloaded', functio n() { // do something maptypeid_changed 지도 기본 타일(일반지도, 스카이뷰, 하이브리드)이 변경되면 발생한다. 14/124
daum.maps.event.addlist ener(map, 'mapt ypeid_changed', funct ion() { // do something MapTypeControl 일반 지도/하이브리드 간 지도 타입 전환 컨트롤을 생성한다. Map 객체의 addcontrol 또는 removecontrol 메소드의 인자로 사용된다. 현재는 일반 지도/하이브리드 간 전환 컨트롤만 지원되며 다른 지도 타입을 제어하는 컨 트롤이 필요할 경우에는 직접 구현해야 한다. 지도에 컨트롤 올리기 샘플보기 Constructor daum.maps.maptypecontrol() var maptypecont rol = new daum.maps.maptypecont rol(); // 지도 오른쪽 위에 지도 타입 컨트롤이 표시되도록 지도에 컨트롤을 추가한다. map.addcont rol(maptypecont rol, daum.maps.cont rolposit ion.topright); ZomControl 15/124
주어진 객체로 확대 축소 컨트롤을 생성한다. Map 객체의 addcontrol 또는 removecontrol 메소드의 인자로 사용된다. 지도에 컨트롤 올리기 샘플보기 Constructor daum.maps.zoomcontrol() var zoomcont rol = new daum.maps.zoomcont rol(); // 지도 오른쪽에 줌 컨트롤이 표시되도록 지도에 컨트롤을 추가한다. map.addcont rol(zoomcont rol, daum.maps.cont rolposit ion.right); MapTypeId daum.maps.maptypeid 객체 Constants daum.maps.maptypeid. MAP_TYPE_ID 지도의 타입이 상수 값으로 정의되어 있다. MAP_TYPE_ID 값으로 사용 가능한 목록은 다음과 같다. ROADMAP : 일반 지도 SKYVIEW : 스카이뷰 HYBRID : 하이브리드(스카이뷰 + 레이블) ROADVIEW : 로드뷰 16/124
OVERLAY : 레이블 TRAFFIC : 교통정보 TERRAIN : 지형도 BICYCLE : 자전거 BICYCLE_HYBRID : 스카이뷰를 위한 자전거 (어두운 지도에서 활용) USE_DISTRICT : 지적편집도 지도의 타입은 용도에 따라 두 가지로 분류한다. 베이스 타입 : ROADMAP SKYVIEW HYBRID 오버레이 타입 : OVERLAY TERRAIN TRAFFIC BICYCLE BICYCLE_HYBRID USE_DISTRICT 기본 타일은 베이스 타입 을 사용한다. Map.set MapTypeId 함수를 통해 지정 가능하다. 기본 타일 위에 얹는 타일은 오버레이 타입 을 사용한다. Map.addOverlayMapTypeId 함수를 통해 지정한 타일을 지도 위에 올릴 수 있다. 그리고 Map.removeOverlayMapTypeId 함수로 언제든 올렸던 오버레이 타일을 걷어낼 수도 있다. 지적편집도 오버레이 타입은 현행 지적 정보와 일치하지 않을 수 있으며 참고 이외 의 용도로 사용하실 수 없습니다. 17/124
지도 타입 바꾸기1 샘플보기 지도 타입 바꾸기2 샘플보기 ProjectionId daum.maps.project ionid 객체 Constants daum.maps.projectionid. PROJECTION_ID 지도의 projectionid 값이 상수 값으로 정의되어 있다. PROJECTION_ID 값으로 사용 가능한 목록은 다음과 같다. NONE : 투영 없는 API 내부의 좌표계 자체. left-bottom을 (0,0)으로 하는 픽 셀단위의 좌표계. WCONG : API 내부 좌표계를 WCongnamul좌표계로 투영. 외부에서 WCongnamul 좌표를 받아 사용가능. tioncontrolposi daum.maps.cont rolposit ion 객체 Contstants daum.maps.controlposition. CONTROL_POSITI ON 컨트롤 위치가 상수 값으로 정의되어 있다. CONTROL_POSITION 값으로 사용 가능한 목록은 다음과 같다. TOP : 위 가운데를 의미한다. 아래로 쌓인다. TOPLEFT : 왼쪽 위를 의미한다. 오른쪽으로 쌓인다. TOPRIGHT : 오른쪽 위를 의미한다. 왼쪽으로 쌓인다. LEFT : 왼쪽 위를 의미한다. 아래로 쌓인다. (주의: 왼쪽 중앙을 의미하는 것이 아니다.) RIGHT : 오른쪽 위를 의미한다. 아래로 쌓인다. (주의: 오른쪽 중앙을 의미하는 것이 아니다.) 18/124
것이 아니다.) BOTTOMLEFT : 왼쪽 아래를 의미한다. 오른쪽으로 쌓인다. BOTTOM : 아래 가운데를 의미한다. 위로 쌓인다. BOTTOMRIGHT : 오른쪽 아래를 의미한다. 왼쪽으로 쌓인다. Daum-Open-API-Reference_http://dna.daum.net 다음과 같이 접근한다. daum.maps.cont rolposit ion.topleft; 지도 컨트롤 올리기 샘플보기 tioncopyrightposi daum.maps.copyright Posit ion 객체 Contstants daum.maps.copyrightposition. COPYRIGHT_P OSITION copyright의 위치가 상수값으로 정의되어 있다. COPYRIGHT_POSITION 값으로 사용 가능한 목록은 다음과 같다. BOTTOMLEFT : 왼쪽 아래를 의미한다. BOTTOMRIGHT : 오른쪽 아래를 의미한다. 다음과 같이 접근한다. daum.maps.copyright Posit ion.bottomright; lesetti sdohtme c i tats 주어진 객체로 타일셋을 생성한다. 커스텀 타일셋1 샘플보기 커스텀 타일셋2 샘플보기 Constructor 19/124
daum.maps.tileset(width, height, urlfunc, copyright, dark, minzoom, maxzoom) var tileset = new daum.maps.tileset(256, 256, function(x, y, z) { /** * x: column * y: row * z: level **/ // 세 parameter를 조합하여 타일 주소를 조합/반환한다. return 'http://return.tile.image.url/' + z + '/' + y + '/' + x + '.png'; }, [], false, 2, 5); width Number : 타일의 가로 크기 height Number : 타일의 세로 크기 urlfunc Function : 타일 주소를 반환하는 함수. 세 개의 파라메터를 가진다. copyright Array.<TilesetCopyright> : 생성할 타일의 카피라이트(기본값: []) dark Boolean : 어두운 타일인지 여부 minzoom Number : 최소 레벨 maxzoom Number : 최대 레벨 gettile Function : 타일 Element를 반환하는 함수. 세개의 파라미터를 가 진다. urlfunc 옵션 대신 사용한다. Static Methods add(id, tileset) 타일셋에 ID를 지정해 추가한다. 추가되면 daum.maps.[지정한id] 로 타일셋을 사용할 수 있다. id String : 지정할 타일셋의 ID t ileset Tileset : 생성한 Tileset 객체 daum.maps.tileset.add('sample', t ileset); // daum.maps.maptypeid.sample 20/124
var map = daum.maps.map(cont ainer, opt ions); map.set MapTypeId(daum.maps.MapTypeId.SAMPLE); lesetcopyrightti 주어진 객체로 타일셋 카피라이트를 생성한다. Constructor daum.maps.tilesetcopyright(msg, shortmsg, minzoom) var copyright = new daum.maps.tileset Copyright('Nasa', 'Nasa', 9); msg String : 기본적으로 출력되는 카피라이트 shortmsg String : 지도 영역이 작아졌을 때 출력되는 짧은 카피라이트 minzoom Number : 해당 카피라이트가 노출될 최소 줌 레벨(기본값: 0) LatLng sdohtme WGS84 좌표 정보를 가지고 있는 객체를 생성한다. Constructor daum.maps.latlng(latitude, longitude) var lat lng = new daum.maps.lat Lng(37, 127); lat it ude Number : 위도 longit ude Number : 경도 21/124
Methods getlat() 위도를 반환한다. var lat lng = new daum.maps.lat Lng(37, 127); latlng.getlat(); // 37 Number getlng() 경도를 반환한다. var lat lng = new daum.maps.lat Lng(37, 127); latlng.getlng(); // 127 Number equals(latlng) 객체가 가지고 있는 좌표와 같은 좌표를 가지고 있는 객체인지 비교한다. var lat lng = new daum.maps.lat Lng(37.1, 127.1), lat lng1 = new daum.maps.lat Lng(37.1, 127.1), lat lng2 = new daum.maps.lat Lng(37.2, 127.2); lat lng.equals(lat lng1); // true lat lng.equals(lat lng2); // false lat lng LatLng 22/124
Boolean tostring() 객체가 가지고 있는 좌표를 문자열로 반환한다. var lat lng = new daum.maps.lat Lng(37, 127); latlng.tostring(); // "(37, 127)" St ring LatLngBounds sdohtme WGS84 좌표계에서 사각영역 정보를 표현하는 객체를 생성한다. 지도 범위 재설정 하기 샘플보기 Constructor daum.maps.latlngbounds(sw, ne) var sw = new daum.maps.latlng(36, 127), ne = new daum.maps.lat Lng(37, 128); var bounds = new daum.maps.latlngbounds(sw, ne); // 인자를 주지 않으면 빈 영역을 생성한다. 23/124
sw LatLng : 사각 영역에서 남서쪽 좌표 ne LatLng : 사각 영역에서 북동쪽 좌표 Methods equals(latlngbounds) 객체가 가지고 있는 영역 정보와 같은 영역 정보를 가지고 있는 객체인지 비교한다. var sw = new daum.maps.latlng(36, 127), ne = new daum.maps.lat Lng(37, 128), lb = new daum.maps.lat LngBounds(sw, ne), lb1 = new daum.maps.lat LngBounds(sw, ne), lb2 = new daum.maps.lat LngBounds(); lb.equals(lb1); // true lb.equals(lb2); // false lat lngbounds LatLngBounds Boolean tostring() 객체가 가지고 있는 영역 정보를 문자열로 반환한다. var sw = new daum.maps.latlng(36, 127), ne = new daum.maps.lat Lng(37, 128), lb = new daum.maps.lat LngBounds(sw, ne); lb.tostring(); // "((36, 127), (37, 128))" St ring 24/124
getsouthwest() 영역의 남서쪽 좌표를 반환한다. var sw = new daum.maps.latlng(36, 127), ne = new daum.maps.lat Lng(37, 128), lb = new daum.maps.lat LngBounds(sw, ne); lb.getsouthwest().tostring(); // "(36, 127)" Lat Lng getnortheast() 영역의 북동쪽 좌표를 반환한다. var sw = new daum.maps.latlng(36, 127), ne = new daum.maps.lat Lng(37, 128), lb = new daum.maps.lat LngBounds(sw, ne); lb.getnortheast().tostring(); // "(37, 128)" Lat Lng isempty() 영역 정보가 비어있는지 확인한다. var sw = new daum.maps.latlng(36, 127), ne = new daum.maps.lat Lng(37, 128), lb1 = new daum.maps.lat LngBounds(sw, ne); lb2 = new daum.maps.lat LngBounds(); lb1.isempty(); // false lb2.isempty(); // true 25/124
lb2.isempty(); // true Boolean extend(latlng) 인수로 주어진 좌표를 포함하도록 영역 정보를 확장한다. var sw = new daum.maps.latlng(36, 127), ne = new daum.maps.lat Lng(37, 128), lb = new daum.maps.lat LngBounds(sw, ne), ext ralat Lng = new daum.maps.lat Lng(36.5, 128.5); lb.tostring(); // "((36, 127), (37, 128))" lb.ext end(ext ralat Lng); lb.tostring(); // "((36, 127), (37, 128.5))" lat lng LatLng contain(latlng) 영역 객체가 인수로 주어진 좌표를 포함하는지 확인한다. var sw = new daum.maps.latlng(36, 127), ne = new daum.maps.lat Lng(37, 128), lb = new daum.maps.lat LngBounds(sw, ne), l1 = new daum.maps.lat Lng(36.5, 127.5), 26/124
l2 = new daum.maps.lat Lng(37, 128); lb.cont ain(l1); // true lb.cont ain(l2); // false lat lng LatLng Boolean Point sdohtme 화면 좌표(픽셀 단위) 정보를 담고 있는 객체 Constructor daum.maps.point(x, y) 화면 좌표 정보를 담고 있는 포인트 객체를 생성한다. var point = new daum.maps.point(12, 34); x : Number y : Number Methods equals(point) 포인트 객체와 같은 좌표를 가지고 있는 객체인지 비교한다. var p = new daum.maps.point(1, 1), p1 = new daum.maps.point(1, 1), p2 = new daum.maps.point(2, 2); 27/124
p.equals(p1); // true p.equals(p2); // false point Point Boolean tostring() 포인트 객체가 가지고 있는 좌표를 문자열로 반환한다. var p = new daum.maps.point(480, 960); p.tostring(); // "(480, 960)" St ring Size sdohtme 크기 정보(픽셀 단위)를 담고 있는 객체 Constructor daum.maps.size(width, height) 크기 정보를 담고 있는 사이즈 객체를 생성한다. var size = new daum.maps.size(56, 78); widt h Number height Number 28/124
Methods equals(size) 사이즈 객체가 가지고 있는 크기와 같은 크기를 가지고 있는 객체인지 비교한다. var s = new daum.maps.size(1, 1), s1 = new daum.maps.size(1, 1), s2 = new daum.maps.size(2, 2); s.equals(s1); // true s.equals(s2); // false size Size Boolean tostring() 사이즈 객체가 가지고 있는 크기를 문자열로 반환한다. var s = new daum.maps.size(480, 960); s.tostring(); // "(480, 960)" St ring event sdohtme c i tats 지도 객체의 이벤트 관련 함수를 담은 네임스페이스 Static Methods 29/124
addlistener(target, type, handler) 다음 지도 API 객체에 이벤트를 등록한다. daum.maps.event.addlistener(map, 'idle', function() { alert('nothing to do'); target EventTarget : 이벤트를 지원하는 다음 지도 API 객체 t ype String : 이벤트 이름 handler Function : 이벤트를 처리할 함수 removelistener(target, type, handler) 다음 지도 API 객체에 등록된 이벤트를 제거한다. var clickhandler = function(event) { }; alert('click: ' + event.latlng.tostring()); daum.maps.event.addlistener(map, 'click', clickhandler); daum.maps.event.removelistener(map, 'click', clickhandler); target EventTarget : 이벤트를 지원하는 다음 지도 API 객체 t ype String : 이벤트 이름 handler Function : 이벤트를 처리하던 함수 trigger(target, type, data) 다음 지도 API 객체에 등록된 이벤트를 발생시킨다. // 마커 객체에 사용자 이벤트를 등록한다 daum.maps.event.addlist ener(marker, 'cust om_act ion', functio n(dat a){ console.log(data + '가 발생했습니다.'); 30/124
// 마커 객체에 등록한 사용자 이벤트를 발생시킨다 daum.maps.event.t rigger(marker, 'cust om_act ion', '사용자 이벤트'); // 사용자 이벤 트가 발생했습니다. target EventTarget : 이벤트를 지원하는 다음 지도 API 객체 t ype String : 이벤트 이름 data * : 이벤트를 처리하는 함수에 넘길 변수 preventmap() 다음 Map 객체의 이벤트를 막는다. 보통 CustomOverlay의 content 혹은 외부 Element의 이벤트 핸들러에서 지도 의 이벤트를 막고 싶을 경우 사용한다. 이벤트의 핸들러 내부에서 이 함수를 사용하며, 이벤트의 핸들링이 끝나면 Map 객 체의 이벤트는 다시 정상 동작하게 된다. daum.maps.event.prevent Map(); MouseEvent 마우스 이벤트로 넘겨 받는 인자 직접 생성할 수는 없으며 이벤트 핸들러에서 내부적으로 생성된 객체를 parameter로 받 아 사용한다. Properties latlng 지도 좌표 daum.maps.event.addlist ener(map, 'click', functio n(mouseevent) { alert(mouseevent.lat Lng instanceo f daum.maps.lat Lng); // true 31/124
T ype Lat Lng point 화면 좌표 daum.maps.event.addlist ener(map, 'click', functio n(event) { alert(event.point instanceo f daum.maps.point); // true T ype Point Marker sdohtme stnev E Constructor daum.maps.marker(options) 주어진 객체로 마커를 생성한다. 지도 뿐만 아니라 로드뷰 위에도 올릴 수 있다. 마커 생성하기 샘플보기 로드뷰에 마커와 인포윈도우 올리기 샘플보기 마커의 고도와 반경 조절하기 샘플보기 var marker = new daum.maps.marker({ map: map, posit ion: new daum.maps.lat Lng(33.450701, 126.570667) opt ions Object 32/124
map Map Roadview : 마커가 올라갈 지도 또는 로드뷰 position LatLng Viewpoint : 마커의 좌표 또는 로드뷰에서의 시점 image MarkerImage : 마커의 이미지 title String : 마커 엘리먼트의 타이틀 속성 값 (툴팁) draggable Boolean : 드래그 가능한 마커, 로드뷰에 올릴 경우에는 유효 하지 않다 clickable Boolean : 클릭 가능한 마커 zindex Number : 마커 엘리먼트의 z-index 속성 값 opacit y Number : 마커 투명도 (0-1) altitude Number : 로드뷰에 올라있는 마커의 높이 값(m 단위) range Number : 로드뷰 상에서 마커의 가시반경(m 단위), 두 지점 사이 의 거리가 지정한 값보다 멀어지면 마커는 로드뷰에서 보이지 않게 된다 Methods setmap(map_or_roadview) 지도 또는 로드뷰에 마커를 올린다. null 을 지정하면 마커를 제거한다. 마커 생성하기 샘플보기 여러개 마커 제어하기 샘플보기 marker.set Map(map); // 지도에 올린다. marker.set Map(null); // 지도에서 제거한다. marker.set Map(roadview); // 로드뷰에 올린다. map_or_roadview Map Roadview getmap() 마커가 올라가있는 지도를 반환한다. marker.get Map(); Map 33/124
setimage(image) 마커에 새 MarkerImage를 지정한다. 다른 이미지로 마커 생성하기 샘플보기 var markerimage = new daum.maps.markerimage( 'ht t p://i1.daumcdn.net/dmaps/apis/nlocalblit 04.png', new daum.maps.size(31, 35), new daum.maps.point(13, 34)); marker.set Image(markerImage); image MarkerImage getimage() 마커의 MarkerImage를 반환한다. marker.get Image(); // 지정했던 MarkerImage의 인스턴스를 리턴한다. MarkerImage setposition(position) 마커의 좌표를 지정한다. 로드뷰의 특정 시점에 고정하기 위해서 Viewpoint 객체를 사용할 수도 있다. panoid를 지정한 Viewpoint 를 사용하면 panoid에 해당하는 로드뷰 위치에서만 보이게 된다. // 지도 혹은 로드뷰에서 마커의 위치를 지정 marker.set Posit ion(new daum.maps.lat Lng(33.450701, 126.570667)); // 로드뷰에서 특정 시점에 고정된 마커의 위치를 지정 marker.set Posit ion(new daum.maps.viewpoint(30, -10)); // 로드뷰에서 특정 시점 및 특정 panoid에서만 보이도록 고정된 마커의 위치를 지정 34/124
// 로드뷰에서 특정 시점 및 특정 panoid에서만 보이도록 고정된 마커의 위치를 지정 marker.set Posit ion(new daum.maps.viewpoint(30, -10, 0, 1033283653)); posit ion LatLng Viewpoint getposition() 마커의 좌표를 반환한다. marker.get Posit ion(); Lat Lng setzindex(zindex) 마커의 z-index를 설정한다. marker.set ZIndex(3); zindex Number getzindex() 마커의 z-index를 반환한다. var marker = new daum.maps.marker({ zindex: 4 marker.getzindex(); // 4 Boolean 35/124
setvisible(visible) 마커의 표시 여부를 지정한다. marker.set Visible(false); // 마커를 숨긴다. visible Boolean getvisible() 마커의 표시 여부를 반환한다. marker.set Visible(true); marker.get Visible(); // true Boolean settitle(title) 마커의 툴팁을 설정한다. marker.set Tit le('타이틀'); t it le String gettitle() 마커의 툴팁을 반환한다. var marker = new daum.maps.marker({ title: "마커 타이틀을 획득하셨습니다." 36/124
marker.get Tit le(); // "마커 타이틀을 획득하셨습니다." Daum-Open-API-Reference_http://dna.daum.net Boolean setdraggable(draggable) 드래그 가능 여부를 지정한다. 로드뷰에 올라가 있을 경우에는 마커의 드래그 기능을 비활성화 되기 때문에 지도에 올라가 있을 경우에만 의미가 있다. marker.set Draggable(true); // 드래그 가능하도록 설정 draggable Boolean getdraggable() 드래그 가능 여부를 반환한다. marker.get Draggable(); Boolean setclickable(clickable) 클릭 가능 여부를 지정한다. true 로 지정하게 되면 마커를 클릭 했을 때, 지도의 클릭 이벤트가 발생하지 않도록 막아준다. marker.set Clickable(true); clickable Boolean 37/124
getclickable() 클릭 가능 여부를 반환한다. marker.get Clickable(); Boolean setaltitude(altitude) 로드뷰상에서 마커의 높이(위치)를 지정한다. 단위는 m(미터)이며 현재 로드뷰의 바닥 높이를 기준으로 떨어져있는 높이를 말한 다. marker.set Alt it ude(10); alt it ude Number 현재 보고있는 시점이 지면으로부터 약 1.7m 떨어져 있다고 가정하고 지면의 높 이값을 0으로 계산한다. 때문에 높이값이 정확하지 않을 수 있다. 또한 로드뷰를 찍은 위치의 정보(해발 고도, 기울어짐)는 고려하지 않기 때문에 마커가 찍힌 위치가 어색하거나 부정확할 수 있다. 보통은 2층 이상에 존재하는 장소를 로드뷰에 대략적으로 표시하기 위해서 사용 한다. getaltitude() 마커의 높이(위치)를 반환한다. 단위는 m(미터). var marker = new daum.maps.marker({ altitude: 10 marker.getaltitude(); // 10 38/124
marker.getaltitude(); // 10 Number setrange(range) 마커의 가시반경을 설정한다. 로드뷰의 위치와 마커의 위치 사이의 거리가 가시반경 이내일 경우에만 로드뷰상에 노출된다. 단위는 m(미터)이며 기본값은 500m이다. marker.set Range(300); range Number getrange() 마커의 가시반경을 반환한다. 단위는 m(미터). var marker = new daum.maps.marker({ range: 300 marker.getrange(); // 300 Number setopacity(opacity) 마커의 투명도를 설정한다. marker.set Opacit y(0.5); 39/124
opacit y Number getopacity() 마커의 투명도를 반환한다. var marker = new daum.maps.marker({ opacit y: 0.5 marker.getopacity(); // 0.5 Number Events click 마커를 클릭하면 발생한다. 마커에 클릭 이벤트 등록하기 샘플보기 daum.maps.event.addlistener(marker, 'click', function() { alert('marker click!'); mouseover 마커에 마우스 커서를 올리면 발생한다. 마커에 마우스 이벤트 등록하기 샘플보기 daum.maps.event.addlistener(marker, 'mouseover', function() { alert('marker mouseover!'); 40/124
mouseout 마우스 커서가 마커에서 벗어나면 발생한다. 마커에 마우스 이벤트 등록하기 샘플보기 daum.maps.event.addlist ener(marker, 'mouseout', functio n() { alert('marker mouseout!'); rightclick 마커를 오른쪽 버튼으로 클릭하면 발생한다. daum.maps.event.addlist ener(marker, 'right click', functio n() { alert('marker right click!'); dragstart 드래그를 시작하면 발생한다. draggable 마커 이벤트 적용하기 샘플보기 daum.maps.event.addlist ener(marker, 'dragst art', functio n() { alert('marker dragst art!'); dragend 드래그를 종료하면 발생한다. draggable 마커 이벤트 적용하기 샘플보기 daum.maps.event.addlistener(marker, 'dragend', function() { alert('marker dragend!'); 41/124
MarkerImage 기본 마커가 아닌, 별도의 이미지를 이용하여 마커를 만들기 위한 이미지 생성 객체 다른 이미지로 마커 생성하기 샘플보기 다양한 이미지 마커 표시하기 샘플보기 Constructor daum.maps.markerimage(src, size[, options]) 마커에 사용할 이미지를 생성한다. 세 번째 파라메터로 offset을 사용할 경우 네 번째 파라메터로 shape, 다섯 번째 파 라메터로 coords를 넣을 수 있다. // 세 번째 파라메터로 options를 사용. var icon = new daum.maps.markerimage( 'ht t p://localimg.daum-img.net/localimages/07/2009/map/icon/blog_icon01_o n.png', new daum.maps.size(31, 35), { offset: new daum.maps.point(16, 34), alt: "마커 이미지 예제", shape: "poly", coords: "1,20,1,9,5,2,10,0,21,0,27,3,30,9,30,20,17,33,14,33" } ); /* 아래와 같이 세번째 파라메터부터 순서대로 offset, shape, coords 값을 넣어주는 방식 으로도 사용 가능하다. 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, 35), 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" ); */ new daum.maps.marker({ 42/124
position: new daum.maps.latlng(33.450701, 126.570667), image: icon }).setmap(map); src String : 이미지 주소 size Size : 마커의 크기 opt ions Obejct alt String : 마커 이미지의 alt 속성값을 정의한다. coords String : 마커의 클릭 또는 마우스오버 가능한 영역을 표현하는 좌표값 offset Point : 마커의 좌표에 일치시킬 이미지 안의 좌표 (기본값: 이미 지의 가운데 아래) shape String : 마커의 클릭 또는 마우스오버 가능한 영역의 모양 spriteorigin Point : 스프라이트 이미지 중 사용할 영역의 좌상단 좌표 sprit esize Size : 스프라이트 이미지의 전체 크기 옵션으로 지정한 shape와 coords의 값은 각각 실제 HTML에서 <area>의 shape 와 coords 속성에 대응한다. 예를 들어 설명하자면 아래와 같다. 아래의 이미지로 MarkerImage를 만들어 보자. 이미지의 크기는 31 35이다. 추가 옵션없이 생성해보자. var icon = new daum.maps.markerimage( 'ht t p://i1.daumcdn.net/dmaps/apis/n_local_blit_04.png', new daum.maps.size(31, 35)); 이렇게 만들어진 MarkerImage의 HTML 마크업을 단순화하면 다음과 같다. // Result <img widt h="31" height ="35" src="ht t p://i1.daumcdn.net/dmaps/apis/ n_local_blit_04.png" alt =""> 43/124
이 MarkerImage로 생성한 Marker에 클릭 이벤트를 등록하면 이미지 크기에 해 당하는 영역 전체에서 클릭 이벤트가 발생한다. 다음과 같은 특정 영역에서만 클릭 이벤트가 발생하도록 해 보자. 옵션으로 shape와 coords값을 주어 MarkerImage를 만든다. var icon = new daum.maps.markerimage( 'ht t p://i1.daumcdn.net/dmaps/apis/n_local_blit_04.png', new daum.maps.size(31, 35), { shape: 'poly', coords: '16,0,20,2,24,6,26,10,26,16,23,22,17,25,14,35,13,35,9,25,6,24,2,20,0,16,0,10,2,6,6,2,10,0' 위의 코드로 만들어진 HTML 마크업의 대략적인 구조는 다음과 같다. // Result <img widt h="31" height ="35" src="ht t p://i1.daumcdn.net/dmaps/apis/ n_local_blit_04.png" alt="" usemap="#marker"> <map name="marker"> <area alt="" shape="poly" coords="16,0,20,2,24,6,26,10,26,16,23,22,17,25,14,35,13,35,9,25,6,24,2,20,0,16,0,10,2,6,6,2,10,0"> </map> 위와 같이 생성된 Marker는 아래 그림에서 보이는 푸른색 영역에서만 클릭 이벤 트가 발생한다. 자세한 내용은 Image Maps 관련 W3C 문서 를 참조한다. 44/124
InfoWindow sdohtme 인포윈도우 객체 Constructor daum.maps.infowindow(options) 주어진 객체로 인포윈도우를 생성한다. 지도 뿐만 아니라 로드뷰 위에도 올릴 수 있다. 인포윈도우 생성하기 샘플보기 로드뷰에 마커와 인포윈도우 올리기 샘플보기 마커의 고도와 반경 조절하기 샘플보기 var infowindow = new daum.maps.infowindow({ map: map, posit ion: new daum.maps.lat Lng(33.450701, 126.570667), cont ent: 'I am InfoWindow' opt ions Object content Node String : 엘리먼트 또는 HTML 문자열 형태의 내용 disableautopan Boolean : 인포윈도우를 열 때 지도가 자동으로 패닝 하지 않을지의 여부 (기본값: false) map Map Roadview : 인포윈도우가 올라갈 지도 또는 로드뷰 posit ion LatLng : 인포윈도우의 좌표 removable Boolean : 삭제 가능한 인포윈도우 zindex Number : 인포윈도우 엘리먼트의 z-index 속성 값 alt it ude Number : 로드뷰에 올라있는 인포윈도우의 높이 값(m 단위) range Number : 로드뷰 상에서 인포윈도우의 가시반경(m 단위), 두 지 점 사이의 거리가 지정한 값보다 멀어지면 인포윈도우는 보이지 않게 된다 Methods 45/124
open(map_or_roadview [, marker]) Daum-Open-API-Reference_http://dna.daum.net 지도에 인포윈도우를 올린다. marker가 주어지면, 해당 마커에서 열린 효과를 낸다. 로드뷰에서도 같은 동작을 한다. 마커에 인포윈도우 표시하기 샘플보기 var map = new daum.maps.map(cont ainer, opt ions); var marker = new daum.maps.marker(opt ions); var infowindow = new daum.maps.infowindow({ posit ion: new daum.maps.lat Lng(33.450701, 126.570667), content: 'open me plz.' infowindow.open(map, marker); map_or_roadview Map Roadview marker Marker close() 인포윈도우를 제거한다. infowindow.close(); getmap() 인포윈도우가 올라가있는 지도를 반환한다. infowindow.get Map(); Map 46/124
setposition(position) 인포윈도우의 좌표를 지정한다. 로드뷰의 특정 시점에 고정하기 위해서 Viewpoint 객체를 사용할 수도 있다. panoid를 지정한 Viewpoint 를 사용하면 panoid에 해당하는 로드뷰 위치에서만 보이게 된다. var posit ion = new daum.maps.lat Lng(33.450701, 126.570667); infowindow.set Posit ion(posit ion); posit ion LatLng Viewpoint getposition() 인포윈도우의 좌표를 반환한다. infowindow.get Posit ion(); Lat Lng setcontent(content) 인포윈도우의 내용을 지정한다. 엘리먼트 또는 HTML 문자열을 지정할 수 있다. infowindow.set Cont ent('this is all for you'); cont ent Node String getcontent() 인포윈도우의 내용을 지정했던 형태로 반환한다. 47/124
infowindow.getcontent(); // "This is all for you" Node String setzindex(zindex) 인포윈도우의 z-index를 설정한다. infowindow.set ZIndex(3); zindex Number getzindex() 인포윈도우의 z-index를 반환한다. var infowindow = new daum.maps.infowindow({ zindex: 4 infowindow.get ZIndex(); // 4 Boolean setaltitude(altitude) 로드뷰상에서 인포윈도우의 높이(위치)를 지정한다. 단위는 m(미터)이며 현재 로드뷰의 바닥 높이를 기준으로 떨어져있는 높이를 말한 다. infowindow.set Alt it ude(10); 48/124
alt it ude Number 현재 보고있는 시점이 지면으로부터 약 1.7m 떨어져 있다고 가정하고 지면의 높 이값을 0으로 계산한다. 때문에 높이값이 정확하지 않을 수 있다. 또한 로드뷰를 찍은 위치의 정보(해발 고도, 기울어짐)는 고려하지 않기 때문에 인포윈도우가 찍힌 위치가 어색하거나 부정확할 수 있다. 보통은 로드뷰에 보이는 2층 이상의 장소정보를 대략적으로 표시하기 위해서 사 용한다. getaltitude() 인포윈도우의 높이(위치)를 반환한다. 단위는 m(미터). var infowindow = new daum.maps.infowindow({ altitude: 10 infowindow.get Alt it ude(); // 10 Number setrange(range) 인포윈도우의 가시반경을 설정한다. 로드뷰의 위치와 인포윈도우의 위치 사이의 거리가 가시반경 이내일 경우에만 로드 뷰상에 노출된다. 단위는 m(미터)이며 기본값은 500m이다. infowindow.set Range(300); range Number getrange() 49/124
인포윈도우의 가시반경을 반환한다. 단위는 m(미터). var infowindow = new daum.maps.infowindow({ range: 300 infowindow.get Range(); // 300 Number CustomOverlay sdohtme 커스텀한 엘리먼트를 담아 지도위에 올릴 수 있는 오버레이 객체. Infowindow 보다는 담을 수 있는 컨텐츠가 자유롭고 AbstractOverlay 보다 사용하기 쉽다는 장점이 있다. Constructor daum.maps.customoverlay(options) 주어진 객체로 커스텀 오버레이를 생성한다. 지도 뿐만 아니라 로드뷰 위에도 올릴 수 있다. 커스텀 오버레이 생성하기1 샘플보기 커스텀 오버레이 생성하기2 샘플보기 로드뷰에 커스텀 오버레이 올리기 샘플보기 로드뷰에 이미지 올리기 샘플보기 커스텀오버레이를 드래그 하기 샘플보기 var cust omoverlay = new daum.maps.cust omoverlay({ map: map, clickable: true, cont ent: '<div class="cust omoverlay"><a href="#">chart </a></div>', posit ion: new daum.maps.lat Lng(33.450701, 126.570667), xanchor: 0.5, yanchor: 1, zindex: 3 50/124
opt ions Object clickable Boolean : true 로 설정하면 컨텐츠 영역을 클릭했을 경우 지 도 이벤트를 막아준다. content Node String : 엘리먼트 또는 HTML 문자열 형태의 내용 map Map Roadview : 커스텀 오버레이가 올라갈 지도 또는 로드뷰 posit ion LatLng Viewpoint : 커스텀 오버레이의 좌표 또는 로드뷰에서 의 시점 xanchor Number : 컨텐츠의 x축 위치. 0_1 사이의 값을 가진다. 기본값 은 0.5 yanchor Number : 컨텐츠의 y축 위치. 0_1 사이의 값을 가진다. 기본값 은 0.5 zindex Number : 커스텀 오버레이의 z-index Methods setmap(map_or_roadview) 지도 또는 로드뷰에 커스텀 오버레이를 올린다. null 을 지정하면 오버레이를 제거한다. cust omoverlay.set Map(map); // 지도에 올린다. cust omoverlay.set Map(null); // 지도에서 제거한다. cust omoverlay.set Map(roadview); // 로드뷰에 올린다. map_or_roadview Map Roadview getmap() 커스텀 오버레이가 올라가있는 지도를 반환한다. cust omoverlay.get Map(); 51/124
Map setposition(position) 커스텀 오버레이의 좌표를 지정한다. 로드뷰의 특정 시점에 고정하기 위해서 Viewpoint 객체를 사용할 수도 있다. panoid를 지정한 Viewpoint 를 사용하면 panoid에 해당하는 로드뷰 위치에서만 보이게 된다. posit ion LatLng Viewpoint getposition() 커스텀 오버레이의 좌표를 반환한다. Lat Lng setcontent(content) 커스텀 오버레이의 내용을 지정한다. 엘리먼트 또는 HTML 문자열을 지정할 수 있다. cont ent Node String getcontent() 커스텀 오버레이의 내용을 지정했던 형태로 반환한다. Node String setvisible(visible) 커스텀 오버레이의 표시 여부를 지정한다. 52/124
visible Boolean getvisible() 커스텀 오버레이의 표시 여부를 반환한다. Boolean setzindex(zindex) 커스텀 오버레이의 z-index를 설정한다. zindex Number getzindex() 커스텀 오버레이의 z-index를 반환한다. Number setaltitude(altitude) 로드뷰상에서 커스텀 오버레이의 높이(위치)를 지정한다. 단위는 m(미터)이며 현재 로드뷰의 바닥 높이를 기준으로 떨어져있는 높이를 말한 다. cust omoverlay.set Alt it ude(10); alt it ude Number 현재 보고있는 시점이 지면으로부터 약 1.7m 떨어져 있다고 가정하고 지면의 높 이값을 0으로 계산한다. 때문에 높이값이 정확하지 않을 수 있다. 또한 로드뷰를 찍은 위치의 정보(해발 고도, 기울어짐)는 고려하지 않기 때문에 53/124
커스텀 오버레이가 찍힌 위치가 어색하거나 부정확할 수 있다. 보통은 2층 이상에 존재하는 장소를 로드뷰에 대략적으로 표시하기 위해서 사용 한다. getaltitude() 커스텀 오버레이의 높이(위치)를 반환한다. 단위는 m(미터). var cust omoverlay = new daum.maps.cust omoverlay({ altitude: 10 cust omoverlay.get Alt it ude(); // 10 Number setrange(range) 커스텀 오버레이의 가시반경을 설정한다. 로드뷰의 위치와 커스텀 오버레이의 위치 사이의 거리가 가시반경 이내일 경우에만 로드뷰상에 노출된다. 단위는 m(미터)이며 기본값은 500m이다. cust omoverlay.set Range(300); range Number getrange() 커스텀 오버레이의 가시반경을 반환한다. 단위는 m(미터). var cust omoverlay = new daum.maps.cust omoverlay({ range: 300 54/124
cust omoverlay.get Range(); // 300 Number AbstractOverlay sdohtme Constructor daum.maps.abstractoverlay() API 사용자가 작접 정의할 수 있는 오버레이. AbstractOverlay를 상속 받아 사용할 객체를 생성하고 prototype을 연결해 준다. 온전히 동작하는 오버레이를 만들고자 한다면 3가지 인터페이스 메소드( onadd, draw, onremove )를 구현해야 한다. 지도 영역 밖의 마커위치 추적하기 샘플보기 // 간단한 텍스트를 지도에 올리는 예제 // 생성자에서 엘리먼트를 생성한다. functio n SimpleText Marker(posit ion, t ext) { this.posit ion = posit ion; this.node = document.creat eelement('div'); this.node.st yle.posit ion = 'absolut e'; this.node.st yle.whit espace = 'nowrap'; this.node.appendchild(document.creat etext Node(t ext)); } // "AbstractOverlay":#AbstractOverlay 상속. 프로토타입 체인을 연결한다.. SimpleText Marker.prot ot ype = new daum.maps.abst ract Overlay; // 필수 구현 메소드. // AbstractOverlay의 getpanels() 메소드로 MapPanel 객체를 가져오고 // 거기에서 오버레이 레이어를 얻어 생성자에서 만든 엘리먼트를 자식 노드로 넣어준다. SimpleText Marker.prot ot ype.onadd = functio n() { var panel = this.get Panels().overlayLayer; panel.appendchild(this.node); }; 55/124
// 필수 구현 메소드. // 생성자에서 만든 엘리먼트를 오버레이 레이어에서 제거한다. SimpleText Marker.prot ot ype.onremove = functio n() { this.node.parent Node.removeChild(this.node); }; // 필수 구현 메소드. // 지도의 속성 값들이 변화할 때마다 호출된다. (zoom, center, maptype) // 엘리먼트의 위치를 재조정 해 주어야 한다. SimpleText Marker.prot ot ype.draw = functio n() { var project ion = this.get Project ion(); var point = project ion.point FromCoords(this.posit ion); var widt h = this.node.offset Widt h; var height = this.node.offset Height; this.node.st yle.left = (point.x - widt h/2) + "px"; this.node.st yle.t op = (point.y - height/2) + "px"; }; var marker = new SimpleTextMarker(map.getCenter(), 'You just activated my trap card!'); marker.set Map(map); Methods draw() 위치를 재조정할 필요가 있을 때 호출된다. 이 함수 내에서 엘리먼트의 위치를 잡아주어야 한다. onadd() 지도에 올릴 때 호출된다. setmap(map) 을 실행하면 이 함수가 실행된다. 이 함수 내에서 생성된 DOM 객체를 MapPanels에 자식 노드로 넣어주도록 한다. onremove() 지도에서 제거할 때 호출된다. set Map(null) 을 실행하면 이 함수가 실행된다. 56/124
이 함수 내에서 MapPanels에 자식 노드로 넣어준 엘리먼트를 제거하도록 한다. setmap(map) 지도에 사용자 오버레이를 올린다. null 을 지정하면 오버레이를 제거한다. map : Map getmap() 사용자 오버레이가 올라가있는 지도를 반환한다. Map getpanels() 붙어있는 지도의 패널을 반환한다. MapPanels getprojection() 붙어있는 지도의 좌표 변환 객체를 반환한다. MapProject ion MapPanels 지도의 패널을 담당하는 객체. Properties 57/124
overlaylayer 오버레이를 올릴 수 있는 HTML 엘리먼트 MapProjection sdohtme 지도와 화면 사이의 좌표 변환을 담당한다. 지도 또는 지도에 올라온 오버레이 객체가 가진 getprojection() 메소드로 얻을 수 있다. 별도의 생성자는 제공하지 않는다. Methods pointfromcoords(latlng) 지도 좌표에 해당하는 위치 좌표(pixel)를 반환한다. 해당 위치 좌표는 지도 엘리먼트 내부의 레이어 위치를 반영한 좌표이다. 지도 영역 밖의 마커위치 추적하기 샘플보기 var mapproject ion = map.get Project ion(), lat lng = new daum.maps.lat Lng(33.450701, 126.570667); mapproject ion.point FromCoords(lat lng); // 지도 좌표에 해당하는 위치 좌표 lat lng LatLng Point coordsfrompoint(point) 위치 좌표(pixel)에 해당하는 지도 좌표를 반환한다. 해당 위치 좌표는 지도 엘리먼트 내부의 타일 레이어 위치를 반영한 좌표이다. 지도 영역 밖의 마커위치 추적하기 샘플보기 var mapproject ion = map.get Project ion(), point = new daum.maps.point(200, 100); 58/124
mapproject ion.coordsfrompoint(point); // 위치 좌표에 해당하는 지도 좌표 point Point LatLng containerpointfromcoords(latlng) 지도 좌표에 해당하는 화면 좌표(pixel)를 반환한다. 해당 화면 좌표는 지도 엘리먼트의 좌상단을 기준으로 한 좌표이다. 커스텀오버레이를 드래그 하기 샘플보기 var mapproject ion = map.get Project ion(), lat lng = new daum.maps.lat Lng(33.450701, 126.570667); mapproject ion.cont ainerpoint FromCoords(lat lng); // 지도 좌표에 해당하는 화면 좌 표 lat lng LatLng Point coordsfromcontainerpoint(point) 화면 좌표(pixel)에 해당하는 지도 좌표를 반환한다. 해당 화면 좌표는 지도 엘리먼트의 좌상단을 기준으로 한 좌표이다. 커스텀오버레이를 드래그 하기 샘플보기 var mapproject ion = map.get Project ion(), point = new daum.maps.point(200, 100); mapproject ion.coordsfromcont ainerpoint(point); // 화면 좌표에 해당하는 지도 좌 표 59/124
point Point LatLng inepolyl sdohtme stnev E 폴리라인 객체 Constructor daum.maps.polyline(options) 주어진 객체로 폴리라인을 생성한다. 원, 선, 사각형, 다각형 표시하기 샘플보기 var polyline = new daum.maps.polyline({ map: map, path: [ new daum.maps.lat Lng(33.452344169439975, 126.56878163224233), new daum.maps.lat Lng(33.452739313807456, 126.5709308145358), new daum.maps.latlng(33.45178067090639, 126.5726886938753) ], strokeweight: 2, st rokecolor: '#FF00FF', st rokeopacit y: 0.8, st rokest yle: 'dashed' opt ions Object endarrow Boolean : 화살표 여부 pat h Array.< LatLng > Array.<Array.< LatLng >> : 폴리라인을 구성하 는 좌표의 배열 또는 좌표 배열의 배열 strokeweight Number : 픽셀 단위의 선 두께 (기본값: 3) st rokecolor String : #xxxxxx 형태의 선 색 (기본값: #F10000 ) st rokeopacit y Number : 선 불투명도 (0-1) (기본값: 0.6) 60/124
st rokest yle String : 선 스타일 (기본값: solid ) Methods setmap(map) 지도에 폴리라인을 올린다. null 을 지정하면 폴리라인을 제거한다. polyline.set Map(map); // 지도에 올린다. polyline.set Map(null); // 지도에서 제거한다. map Map getmap() 폴리라인이 올라가있는 지도를 반환한다. polyline.get Map(); // daum.maps.map Map setoptions(options) 폴리라인의 옵션을 설정한다. polyline.set Opt ions({ strokeweight: 2, st rokecolor: '#FF00FF', st rokeopacit y: 0.8, st rokest yle: 'dashed' 61/124
options : Object setpath(path) 폴리라인의 경로를 지정한다. 경로는 좌표의 배열로 표현한다. var newpath = [ new daum.maps.lat Lng(33.452344169439975, 126.56878163224233), new daum.maps.lat Lng(33.452739313807456, 126.5709308145358), new daum.maps.latlng(33.45178067090639, 126.5726886938753) ]; polyline.set Pat h(newpat h); path : Array.< LatLng > : 좌표의 배열 getpath() 폴리라인의 경로를 반환한다. polyline.get Pat h(); // 경로정보가 배열로 반환된다. Array.< Lat Lng > getlength() 폴리라인의 총 길이를 m(미터)단위로 반환한다. 선의 거리 계산하기 샘플보기 polyline.getlength(); Number 62/124
Events 안드로이드 2.3버전 이하에서는 Event를 지원하지 않습니다. mouseover 폴리라인에 마우스 커서를 올리면 발생한다. daum.maps.event.addlist ener(polyline, 'mouseover', functio n(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mouseout 마우스 커서가 폴리라인에서 벗어나면 발생한다. daum.maps.event.addlistener(polyline, 'mouseout', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mousemove 폴리라인에서 마우스가 움직이면 발생한다. daum.maps.event.addlistener(polyline, 'mousemove', function(mouseevent) { var lat lng = mouseevent.lat Lng; 63/124
console.log(latlng.tostring()); Arguments MouseEvent mousedown 폴리라인에서 마우스 버튼을 누르면 발생한다. daum.maps.event.addlistener(polyline, 'mousedown', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent click 폴리라인을 클릭하면 발생한다 daum.maps.event.addlistener(polyline, 'click', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent Polygon sdohtme stnev E 다각형 객체 64/124
Constructor daum.maps.polygon(polygonoptions) 주어진 객체로 다각형을 생성한다. 원, 선, 사각형, 다각형 표시하기 샘플보기 구멍난 다각형 만들기 샘플보기 var polygon = new daum.maps.polygon({ map: map, path: [ new daum.maps.lat Lng(33.452344169439975, 126.56878163224233), new daum.maps.lat Lng(33.452739313807456, 126.5709308145358), new daum.maps.latlng(33.45178067090639, 126.5726886938753) ], strokeweight: 2, st rokecolor: '#FF00FF', st rokeopacit y: 0.8, st rokest yle: 'dashed', fillcolor: '#00EEEE', fillopacit y: 0.5 opt ions Object fillcolor String : #xxxxxx 형태의 채움 색 (기본값: #F10000 ) fillopacit y Number : 채움 불투명도 (0-1) (기본값: 0) pat h Array.< LatLng > Array.<Array.< LatLng >> : 다각형을 구성하는 좌표의 배열 혹은 좌표 배열의 배열 strokeweight Number : 픽셀 단위의 선 두께 (기본값: 3) st rokecolor String : #xxxxxx 형태의 선 색 (기본값: #F10000 ) st rokeopacit y Number : 선 불투명도 (0-1) (기본값: 0.6) st rokest yle String : 선 스타일 (기본값: solid ) Methods setmap(map) 지도에 다각형을 올린다. null 을 지정하면 다각형을 제거한다. 65/124
polygon.set Map(map); // 지도에 올린다. polygon.set Map(null); // 지도에서 제거한다. map Map getmap() 다각형이 올라가있는 지도를 반환한다. polygon.get Map(); Map setoptions(options) 다각형의 옵션을 설정한다. polygon.set Opt ions({ strokeweight: 2, st rokecolor: '#FF00FF', st rokeopacit y: 0.8, st rokest yle: 'dashed', fillcolor: '#00EEEE', fillopacit y: 0.5 opt ions Object setpath(path) 다각형의 경로를 지정한다. 경로는 좌표의 배열로 표현한다. 66/124
polygon.set Pat h([ new daum.maps.lat Lng(33.452344169439975, 126.56878163224233), new daum.maps.lat Lng(33.452739313807456, 126.5709308145358), new daum.maps.latlng(33.45178067090639, 126.5726886938753) ]); path Array.< LatLng > : 좌표의 배열 getpath() 다각형의 경로를 반환한다. polygon.get Pat h(); // 경로정보가 배열로 반환된다. Array.< Lat Lng > getlength() 다각형의 총 길이를 m(미터)단위로 반환한다. polygon.getlength(); Number getarea() 다각형으로 둘러싸인 영역의 넓이를 m2(제곱미터)단위로 반환한다. polygon.getarea(); 67/124
Number Events 안드로이드 2.3버전 이하에서는 Event를 지원하지 않습니다. mouseover 다각형에 마우스 커서를 올리면 발생한다. 다각형에 이벤트 등록하기1 샘플보기 다각형에 이벤트 등록하기2 샘플보기 daum.maps.event.addlistener(polygon, 'mouseover', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mouseout 마우스 커서가 다각형에서 벗어나면 발생한다. 다각형에 이벤트 등록하기1 샘플보기 다각형에 이벤트 등록하기2 샘플보기 daum.maps.event.addlistener(polygon, 'mouseout', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mousemove 68/124
다각형에서 마우스를 움직이면 발생한다. 다각형에 이벤트 등록하기2 샘플보기 daum.maps.event.addlistener(polygon, 'mousemove', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mousedown 다각형에서 마우스 버튼을 누르면 발생한다. 다각형에 이벤트 등록하기1 샘플보기 다각형에 이벤트 등록하기2 샘플보기 daum.maps.event.addlistener(polygon, 'mousedown', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent click 다각형을 클릭하면 발생한다. 다각형에 이벤트 등록하기2 샘플보기 daum.maps.event.addlistener(polygon, 'click', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); 69/124
Arguments MouseEvent rcleci sdohtme stnev E 원 객체 Constructor daum.maps.circle(options) 주어진 객체로 원을 생성한다. 원, 선, 사각형, 다각형 표시하기 샘플보기 var circle = new daum.maps.circle({ map: map, cent er : new daum.maps.lat Lng(33.450701, 126.570667), radius: 50, strokeweight: 2, st rokecolor: '#FF00FF', st rokeopacit y: 0.8, st rokest yle: 'dashed', fillcolor: '#00EEEE', fillopacity: 0.5 opt ions Object cent er LatLng : 중심 좌표 fillcolor String : #xxxxxx 형태의 채움 색 (기본값: #F10000 ) fillopacit y Number : 채움 불투명도 (0-1) (기본값: 0) radius Number : 미터 단위의 반지름 strokeweight Number : 픽셀 단위의 선 두께 (기본값: 3) st rokecolor String : #xxxxxx 형태의 선 색 (기본값: #F10000 ) st rokeopacit y Number : 선 불투명도 (0-1) (기본값: 0.6) st rokest yle String : 선 스타일 (기본값: solid ) 70/124
Methods setmap(map) 지도에 원을 올린다. null 을 지정하면 원을 제거한다. circle.set Map(map); // 지도에 올린다. circle.set Map(null); // 지도에서 제거한다. map Map getmap() 원이 올라가있는 지도를 반환한다. circle.get Map(); Map setoptions(options) 원의 옵션을 설정한다. circle.set Opt ions({ radius: 20, strokeweight: 2, st rokecolor: '#FF00FF', st rokeopacit y: 0.8, st rokest yle: 'dashed' opt ions Object 71/124
setposition(position) 원의 중심 좌표를 지정한다. var posit ion = new daum.maps.lat Lng(33.450701, 126.570667); circle.set Posit ion(posit ion); posit ion LatLng getposition() 원 중심의 좌표를 반환한다. circle.getposition().tostring(); Lat Lng setradius(radius) 원의 반지름을 m(미터)단위로 지정한다. circle.set Radius(200); radius Number getradius() 원의 반지름을 반환한다. circle.getradius(); // 200 72/124
circle.getradius(); // 200 Number getbounds() 원을 포함하는 최소의 사각형 영역을 구한다. circle.get Bounds(); Lat LngBounds Events 안드로이드 2.3버전 이하에서는 Event를 지원하지 않습니다. mouseover 원에 마우스 커서를 올리면 발생한다. daum.maps.event.addlistener(circle, 'mouseover', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mouseout 마우스 커서가 원에서 벗어나면 발생한다. daum.maps.event.addlistener(circle, 'mouseout', function(mouseevent) { 73/124
var latlng = mouseevent.latlng; console.log(latlng.tostring()); Arguments MouseEvent mousemove 원에서 마우스를 움직이면 발생한다. daum.maps.event.addlistener(circle, 'mousemove', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mousedown 원에서 마우스 버튼을 누르면 발생한다. daum.maps.event.addlistener(circle, 'mousedown', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent click 원을 클릭하면 발생한다. daum.maps.event.addlistener(circle, 'click', function(mouseevent) { 74/124
var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent ipselel sdohtme stnev E 타원 객체 Constructor daum.maps.ellipse(options) 주어진 객체로 타원을 생성한다. var ellipse = new daum.maps.ellipse({ map: map, cent er : new daum.maps.lat Lng(33.450701, 126.570667), rx: 50, ry: 100, strokeweight: 2, st rokecolor: '#FF00FF', st rokeopacit y: 0.8, st rokest yle: 'dashed', fillcolor: '#00EEEE', fillopacit y: 0.5 opt ions Object cent er LatLng : 중심 좌표 fillcolor String : #xxxxxx 형태의 채움 색 (기본값: #F10000 ) fillopacit y Number : 채움 불투명도 (0-1) (기본값: 0) rx Number : 미터 단위의 x축 반지름 ry Number : 미터 단위의 y축 반지름 75/124
strokeweight Number : 픽셀 단위의 선 두께 (기본값: 3) st rokecolor String : #xxxxxx 형태의 선 색 (기본값: #F10000 ) st rokeopacit y Number : 선 불투명도 (0-1) (기본값: 0.6) st rokest yle String : 선 스타일 (기본값: solid ) Methods setmap(map) 지도에 타원을 올린다. null 을 지정하면 타원을 제거한다. ellipse.set Map(map); // 지도에 올린다. ellipse.set Map(null); // 지도에서 제거한다. map Map getmap() 타원이 올라가있는 지도를 반환한다. ellipse.get Map(map); Map setoptions(options) 타원의 옵션을 설정한다. ellipse.set Opt ions({ strokeweight: 2, st rokecolor: '#FF00FF', st rokeopacit y: 0.8, st rokest yle: 'dashed', fillcolor: '#00EEEE', 76/124
fillopacity: 0.5 opt ions Object setposition(position) 타원의 중심 좌표를 지정한다. ellipse.set Posit ion(new daum.maps.lat Lng(33.450701, 126.570667)); posit ion LatLng getposition() 타원 중심의 좌표를 반환한다. ellipse.getposition().tostring(); Lat Lng setradius(rx, ry) 타원의 반지름을 m(미터)단위로 지정한다. ellipse.setradius(600, 1000); rx Number ry Number 77/124
getradius() 타원의 x, y축 반지름을 반환한다. ellipse.get Radius(); // { rx: 600, ry: 1000 } Object rx Number : x축 반지름 ry Number : y축 반지름 getradiusx() 타원의 x축 반지름을 반환한다. ellipse.get RadiusX(); // 600 Boolean getradiusy() 타원의 y축 반지름을 반환한다. ellipse.get RadiusY(); // 1000 Boolean getbounds() 타원을 포함하는 최소의 사각형 영역을 구한다. ellipse.get Bounds(); 78/124
ellipse.get Bounds(); Lat LngBounds Events 안드로이드 2.3버전 이하에서는 Event를 지원하지 않습니다. mouseover 타원에 마우스 커서를 올리면 발생한다. daum.maps.event.addlistener(ellipse, 'mouseover', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mouseout 마우스 커서가 타원에서 벗어나면 발생한다. daum.maps.event.addlistener(ellipse, 'mouseout', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mousemove 타원에서 마우스를 움직이면 발생한다. 79/124
daum.maps.event.addlist ener(ellipse, 'mousemove', functio n(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mousedown 타원에서 마우스 버튼을 누르면 발생한다. daum.maps.event.addlistener(ellipse, 'mousedown', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent click 타원을 클릭하면 발생한다. daum.maps.event.addlistener(ellipse, 'click', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent 80/124
Rectangle sdohtme stnev E 사각형 객체 Constructor daum.maps.rectangle(options) 주어진 객체로 사각형를 생성한다. 원, 선, 사각형, 다각형 표시하기 샘플보기 var rect angle = new daum.maps.rect angle({ map: map, bounds : new daum.maps.lat LngBounds( new daum.maps.lat Lng(33.450701, 126.570667), new daum.maps.lat Lng(33.452513, 126.57280) ), strokeweight: 4, st rokecolor: '#FF00FF', st rokeopacit y: 0.8, st rokest yle: 'dashed', fillcolor: '#00EEEE', fillopacit y: 0.5 opt ions Object bounds LatLngBounds : 사각형의 영역 fillcolor String : #xxxxxx 형태의 채움 색 (기본값: #F10000 ) fillopacit y Number : 채움 불투명도 (0-1) (기본값: 0) strokeweight Number : 픽셀 단위의 선 두께 (기본값: 3) st rokecolor String : #xxxxxx 형태의 선 색 (기본값: #F10000 ) st rokeopacit y Number : 선 불투명도 (0-1) (기본값: 0.6) st rokest yle String : 선 스타일 (기본값: solid ) Methods setmap(map) 81/124
지도에 사각형을 올린다. null 을 지정하면 사각형을 제거한다. rect angle.set Map(map); // 지도에 올린다. rect angle.set Map(null); // 지도에서 제거한다. map Map getmap() 사각형이 올라가있는 지도를 반환한다. rect angle.get Map(); Map setoptions(options) 사각형의 옵션을 설정한다. rect angle.set Opt ions({ strokeweight: 4, st rokecolor: '#FF00FF', st rokeopacit y: 0.8, st rokest yle: 'dashed', fillcolor: '#00EEEE', fillopacit y: 0.5 opt ions Object setbounds(bounds) 82/124
사각형의 영역을 지정한다. rect angle.set Bounds( new daum.maps.lat LngBounds( new daum.maps.lat Lng(33.450701, 126.560667), new daum.maps.lat Lng(33.452213, 126.57080) ) ); bounds LatLngBounds getbounds() 사각형의 영역을 반환한다. rect angle.get Bounds(); Lat LngBounds Events 안드로이드 2.3버전 이하에서는 Event를 지원하지 않습니다. mouseover 사각형에 마우스 커서를 올리면 발생한다. daum.maps.event.addlist ener(rect angle, 'mouseover', functio n(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments 83/124
MouseEvent mouseout 마우스 커서가 사각형에서 벗어나면 발생한다. daum.maps.event.addlistener(rectangle, 'mouseout', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mousemove 사각형에서 마우스를 움직이면 발생한다. daum.maps.event.addlist ener(rect angle, 'mousemove', functio n(mouseeven t) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent mousedown 사각형에서 마우스 버튼을 누르면 발생한다. daum.maps.event.addlist ener(rect angle, 'mousedown', functio n(mouseevent ) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); 84/124
Arguments MouseEvent click 사각형을 클릭하면 발생한다. daum.maps.event.addlistener(rectangle, 'click', function(mouseevent) { var lat lng = mouseevent.lat Lng; console.log(latlng.tostring()); Arguments MouseEvent Roadview sdohtme stnev E 로드뷰 객체 Constructor daum.maps.roadview(container[, options]) 주어진 객체로 로드뷰를 생성한다. options로 넣을 수 있는 속성들 중 pan, tilt, zoom, jsnamespace는 PC와 모바일 공통이다. 그 외의 속성들은 PC에서만 사용 가능하다. 각종 오버레이 객체도 올릴 수 있다. 로드뷰 생성하기 샘플보기 로드뷰 도로를 이용하여 로드뷰 생성하기 샘플보기 로드뷰에 커스텀 오버레이 올리기 샘플보기 var cont ainer = document.get Element ById('roadview'); var roadview = new daum.maps.roadview(cont ainer); 85/124
var roadview = new daum.maps.roadview(cont ainer); Daum-Open-API-Reference_http://dna.daum.net cont ainer Node : 로드뷰를 생성할 엘리먼트 opt ions Object panoid Number : 로드뷰 시작 지역의 고유 아이디 값. panox Number : panoid가 유효하지 않을 경우 지도좌표를 기반으로 데이터를 요청할 수평 좌표값. panoy Number : panoid가 유효하지 않을 경우 지도좌표를 기반으로 데 이터를 요청할 수직 좌표값. pan Number : 로드뷰 처음 실행시에 바라봐야 할 수평 각. 0이 정북방 향. (0_360) tilt Number : 로드뷰 처음 실행시에 바라봐야 할 수직 각.(-90_90) zoom Number : 로드뷰 줌 초기값.(-3_3) Methods setpanoid(panoid, position) 파노라마 ID를 지정한다. 지도 좌표도 함께 넘겨야 한다. var panoid = 1023434522; var posit ion = new daum.maps.lat Lng(33.450701, 126.560667); roadview.set PanoId(panoId, posit ion); panoid Number posit ion LatLng getpanoid() 파노라마 ID를 반환한다. roadview.get PanoId(); // 1023434522 86/124
Number st oreid Number st orepanoid Number setviewpoint(viewpoint) 로드뷰 시점을 지정한다. roadview.set Viewpoint({ pan: 10, tilt: 0, zoom: 0 viewpoint Viewpoint getviewpoint() 로드뷰 시점을 반환한다. roadview.get Viewpoint(); // { pan: 45, tilt: 10, zoom: 1 } Viewpoint pan Number tilt Number zoom Number getviewpointwithpanoid() 로드뷰 시점과panoId를 함께 반환한다. 87/124
roadview.get Viewpoint Wit hpanoid(); // { pan: 30, tilt: -10, zoom: 0, panoid: 10 17315916 } Viewpoint pan Number tilt Number zoom Number panoid Number getposition() 로드뷰가 보여주는 지점의 지도 좌표를 반환한다. roadview.getposition().tostring(); Lat Lng relayout() 로드뷰 엘리먼트의 크기를 변경한 후에는 반드시 이 함수를 호출해야 한다. 플래시 로드뷰는 자동으로 영역을 잡는 경우가 있으나 모바일 로드뷰는 꼭 호출하도 록 하자. 단, window의 resize 이벤트에 대해서는 자동으로 호출된다. roadview.relayout(); Events init 로드뷰가 초기화를 끝내면 발생한다. 88/124