[네이버 OpenAPI 초보자 가이드 개요와 목차] 바로가기

문제 상황

저희 가족은 조만간 새 집으로 이사하려고 합니다. 그래서 어디로 이사하면 좋을지 물색하고 있는 중입니다. 가족 중 세 명은 직장에 다니고 한 명은 학교에 다니고 있습니다. 안타깝게도 각 회사와 학교는 여기저기 흩어져 있어서 이사할 집을 결정하기가 쉽지 않습니다. 가족 구성원 모두의 직장과 학교에 가까운 곳으로 이사 갈 수 있으면 좋겠지만 그건 좀 어려워 보입니다.

그래서 몇 개 후보지를 정해놓고 그 중에서 직장과 학교까지의 거리의 총합이 가장 짧은 곳으로 정하려고 합니다.
네이버 지도API를 이용하면 가장 가까운 이사 후보지를 찾아 주는 애플리케이션을 만들 수 있습니다.

준비하기

최적 지점 찾기 예제를 따라해 보기 전에 준비해야 할 것이 있습니다.

• 필수사항
  1. 네이버 지도 API 키가 필요합니다.
  2. 자바스크립트 실행을 위해서 FireFox 1.5 이상 또는 Microsoft Internet Explorer 6 이상을 사용해야 합니다.
• 권장사항
  1. 본 예제는 HTML과 자바스크립트로 작성되어 있습니다. 따라서 독자는 HTML과 자바스크립트로 작성된 코드를 이해할 수 있어야 합니다. 네이버 지도 API에 대한 사용자 문서를 읽어두시면 예제를 이해하는데 도움이 됩니다. 지도 API 사용자 문서는 네이버 OpenAPI 사이트(http://openapi.naver.com/)에서 찾아볼 수 있습니다.

구현하기

우선 지도 화면에 가족들의 직장과 학교를 마커로 표시합니다. 그런 다음 몇몇 이사 후보지를 선택합니다. 그리고 버튼을 누르면 가장 가까운 후보지를 찾아서 그 후보지와 각 직장/학교를 선으로 연결해 보여주는 애플리케이션을 만들어 봅시다.

Step1. 겉모습 만들기

네이버 지도와 마커 선택창, 최적점을 찾아주는 버튼, 마커와 선을 지우는 버튼이 출력되도록 전체 화면을 구현합니다.

● map.html 파일

위의 소스를 복사하기 위해 열기

① 지도를 출력할 컨테이너를 설정합니다. 위 예제에서는 div 엘리먼트를 사용하여 설정하였습니다.

② 이사 후보지를 나타낼 마커와 직장/학교를 나타내는 마커를 구분하기 위하여 마커의 종류를 선택하는 라디오 버튼 2개를 만듭니다. 위 예제에서는 후보지 마커 버튼의 이름을 ‘home’으로, 직장/학교 마커 버튼의 이름을 ‘office’ 라고 불였습니다.

③ 가장 가까운 후보지를 찾아내는 find 버튼을 생성합니다. find 버튼을 클릭하면 find() 함수를 호출합니다.

④ 지도에 표시한 마커를 모두 지우는 clear 버튼을 생성합니다. clear 버튼을 클릭하면 clearMarkers() 함수를 호출합니다.

⑤ 네이버 지도 API 자바스크립트를 불러 옵니다. 이때 key 파라미터로 여러분이 발급받은 지도 API 키를 입력해야 합니다. 위 예제에서 YOURMAPKEY라고 표현된 부분에 여러분이 발급받은 지도API 키를 입력합니다.

⑥ map.js 자바스크립트를 불러 옵니다. map.js는 다음 단계에서 우리가 작성할 자바스크립트 파일입니다.

Step2. 지도 생성 및 초기화하기

지도 객체를 생성하고 초기화하도록 구현합니다.

● map.js 파일

위의 소스를 복사하기 위해 열기

① NMap 클래스로 지도 객체를 생성합니다. 지도 객체를 생성할 때는 지도를 출력할 컨테이너 정보를 첫 번째 파라미터로 전달해야 합니다. 두 번째, 세 번째 파라미터로 지도의 크기를 지정할 수 있습니다. 크기를 지정하지 않을 경우 자동으로 컨테이너의 너비와 높이를 설정합니다.

※ 참고: NMap 클래스와 같이 이름이 ‘N’으로 시작하는 클래스는 네이버 지도 API에 정의되어 있는 클래스입니다.

② NMap.setBound() 메소드를 사용하여 컨테이너에 표시할 지도 영역을 설정합니다. NMap.setBound() 메소드의 입력 파라미터로 left, top, right, bottom 값을 넣습니다. 컨테이너 안에 지도 전체를 그려야 하므로 left와 bottom에는 0을 넣고, right와 top에는 999999를 넣습니다.

※ 참고: 지도의 좌표는 남쪽으로 갈수록 작은 값을 가지므로 top이 아닌 bottom의 값이 0이라는 점에 주의합니다.

③ 사용자가 지도 화면을 축소 또는 확대할 수 있도록 줌 컨트롤 객체를 생성합니다. NZoomControl 클래스로 줌 컨트롤 객체를 생성한 후에, NZoomControl.setAlign()와 NZoomControl.setValign() 메소드를 사용하여 줌 컨트롤 객체의 표시 위치를 설정합니다. 그런 다음 NMap.addControl() 메소드로 줌 컨트롤 객체를 지도에 추가합니다. 이렇게 하면 축척 슬라이드 바가 지도 화면에 표시됩니다.

④ NEvent.addListener() 메소드를 사용하여 click이벤트를 등록하고, 이벤트가 발생할 때 실행할 코드를 등록합니다. 즉 지도 객체를 클릭했을 때 clickMap() 함수가 호출되도록 등록합니다. clickMap() 호출 시에는 매개변수로 클릭 위치를 전달합니다. clickMap() 함수 작성은 Step4 단계에서 설명합니다.

Step3. 마커 붙이기

마커의 정보를 저장하기 위한 markers 객체를 선언하고, MARKER_KEY 상수와 LINE_KEY 상수를 정의합니다.

● map.js 파일

위의 소스를 복사하기 위해 열기

① markers객체를 선언합니다. markers는 마커들의 정보를 담기 위한 객체입니다. markers.office는 직장/학교 마커들의 정보를 담고 있고, markers.home은 이사 후보지 마커들에 대한 것입니다. prefix와 offset는 마커 아이콘을 만들기 위해 필요한 값을 저장하고, points에는 마커의 위치 정보를 저장합니다.

② MARKER_KEY와 LINE_KEY를 정의합니다. MARKER_KEY는 마커를 지도에 붙일 때 사용하는 상수이고, LINE_KEY는 선을 지도에 그릴 때 사용하는 상수입니다. MARKER_KEY와 LINE_KEY는 NMap.addOverlay()메소드와 NMap.clearOverlays()메소드의 매개변수로 사용됩니다. 0이 아닌 모든 값을 가질 수 있습니다.

Step4. 이벤트 처리 함수 작성하기

사용자가 지도를 클릭했을 때 그 이벤트를 처리할 clickMap()함수를 작성합니다.

● map.js 파일

위의 소스를 복사하기 위해 열기

① 체크된 라디오 버튼에 대해서만 마커 생성 작업을 수행할 수 있도록 조건문을 작성합니다. 위 예제에서 buttons는 라디오 버튼의 배열이고, checked 속성을 확인해서 사용자가 체크한 라디오 버튼을 찾아냅니다.

② 마커 개수를 제한하기 위한 코드를 추가합니다. 위 예제에서는 office, home 각각 10개까지만 마커를 생성할 수 있도록 했습니다. 만약 사용자가 10개 이상 마커를 추가할 경우에는 경고 메시지를 보내고 마커를 생성하지 않습니다.

③ NMark 클래스로 마커 객체를 생성합니다. NMark의 첫 번째 파라미터로 마커 위치를 지정합니다. 마커의 위치 정보는 clickMap()의 매개변수로 받은 pos와 같습니다. NMark의 두 번째 파라미터로 마커 아이콘을 지정합니다. 마커 아이콘은 NIcon의 인스턴스를 만들어서 정의하는데, NIcon의 입력 파라미터로 아이콘 그림 파일의 URL과 아이콘 크기를 입력합니다.

a. 마커 아이콘 그림 파일의 위치는 markers 객체의 prefix와 offset을 조합해서 만들었습니다.
b. 마커 아이콘의 크기는 NSize 클래스로 생성했습니다.

④ NMap.addOverlay() 메소드를 사용하여 마커를 지도에 추가합니다. NMap.addOverlay() 메소드의 매개변수로 마커 객체와 MARKER_KEY를 지정합니다. 모든 마커에 대해 같은 MARKER_KEY를 사용하면 향후 같은 MARKER_KEY를 가진 마커를 한꺼번에 지울 수 있습니다.

⑤ 1)~4) 과정을 통해 생성한 마커의 위치 정보를 markers객체의 points 값으로 저장합니다. 이 정보는 최적 지점을 찾을 때 필요합니다.

Step5. 최적지점 찾기

여기까지 해서 지도 위에 이사 후보지와 직장/학교의 위치를 표시하였습니다. 이제 이 위치 정보를 이용해서 최적 지점을 찾는 find() 함수를 구현합니다.

● map.js 파일

위의 소스를 복사하기 위해 열기

① 최적 지점을 저장할 near 객체를 선언합니다.

② 이사 후보지에서 직장/학교까지 거리의 총합을 저장할 nearDist 변수를 선언합니다. 위 예제 코드에서 Number.MAX_VALUE는 Number 클래스가 가질 수 있는 최대값을 의미합니다.

③ 직장 또는 학교의 위치 정보를 저장할 offices 변수를 선언합니다.

④ 이사 후보지의 위치 정보를 저장할 homes 변수를 선언합니다.

⑤ 이사 후보지에서 각 직장/학교까지의 거리를 구해서 합산합니다. 모든 이사 후보지에 대해서 이 작업을 반복한 후, 결과 값이 가장 작은 이사 후보지를 선정하여 near 객체에 저장합니다.

⑥ 최적 지점을 찾아내고 나면 최적 지점과 모든 직장/학교가 한 화면에 들어오도록 지도의 중심점과 축척을 조절해야 합니다. 최적 지점의 좌표와 모든 직장/학교의 좌표들을 비교해서 x좌표의 최소, 최대값과 y좌표의 최소, 최대값을 구합니다. 변수 minx, maxx, miny, maxy에 우선 최적 지점의 좌표를 넣고 이어서 직장/학교들의 좌표를 비교하는 방법으로 구할 수 있습니다. 최적 지점의 좌표 값은 near 객체의 NPoint.getX() 메소드와 NPoint.getY() 메소드를 이용해서 구할 수 있습니다.

⑦ NMap.setBound() 메소드를 사용하여 한 화면에 최적 지점과 직장/학교가 모두 나올 수 있도록 지도 영역을 설정합니다.

⑧ 최적 지점과 직장/학교 마커를 연결하는 선을 그립니다. 지도 객체의 NMap.clearOverlays() 메소드를 호출하여 이전에 그렸던 선을 지웁니다. 이 때 LINE_KEY 값을 매개변수로 입력합니다. 이렇게 하면 같은 LINE_KEY 값을 갖는 선은 한꺼번에 지워집니다.

⑨ NPolyline 클래스로 line 객체를 생성하고, NMap.addOverlay() 메소드를 이용하여 지도 위에 선을 그립니다. NMap.addOverlay() 메소드 호출 시에는 모든 선이 같은 키 값을 가질 수 있도록 같은 LINE_KEY 값을 줍니다.

Step6. 마커 삭제

여기까지 해서 최적 지점을 찾아보았습니다. 마지막으로 clear 버튼을 눌렀을 때 마커를 삭제하는 함수를 구현합니다.

● map.js 파일

위의 소스를 복사하기 위해 열기

① clear 버튼을 누르면 모든 마커를 삭제하는 clearMarkers() 함수를 정의합니다.

② markers 객체에 저장된 마커의 위치 정보를 지웁니다.

③ NMap.clearOverlays() 메소드를 사용해서 지도 위에 표시된 마커와 선을 모두 지웁니다.

예제 코드 실행 결과

위 예제 코드를 실행하면 다음과 같이 최적 지점이 지도 위에 표시됩니다.

전체 소스코드

map.html 파일

<!DOCTYPE HTML SYSTEM> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="Cache-Control" content="No-Cache">     <meta http-equiv="Pragma" content="No-Cache">     <title>최적지점 찾기 예제</title> </head> <body style="margin: 0px 0px 0px 0px">     <!-- 지도-->     <div id='mapContainer' style='width:640px; height:480px'></div>     <div>         <br>         <!-- 마커 선택 라디오 버튼-->         <form name="markerForm" action="">             <input type="radio" name="markerGroup" value="office" />             office<br>             <input type="radio" name="markerGroup" value="home" />             home<br>         </form>         <!-- 찾기 버튼과 마커 지우기 버튼-->         <input type="button" value="find" onclick="find();" />         <input type="button" value="clear" onclick="clearMarkers();" />     </div>     <!-- 자바스크립트 불러오기 -->     <script type="text/javascript" src="http://maps.naver.com/js/naverMap.naver?key=YOURMAPKEY"></script>     <script type="text/javascript" src="map.js"></script> </body> </html>

map.js 파일

var mapObj = new NMap(document.getElementById('mapContainer'), 640, 480); var zoom = new NZoomControl(); zoom.setAlign("right"); zoom.setValign("bottom"); mapObj.addControl(zoom); mapObj.setBound(0, 999999, 999999, 0); NEvent.addListener(mapObj, "click", clickMap);   var markers = {     office: {         prefix: 'http://sstatic.naver.com/search/local/icon3/icos_L',         offset: 64,         points: []     },     home: {         prefix: 'http://static.naver.com/local/map_img/set/icos_free_',         offset: 96,         points: []     } };   var MARKER_KEY = 'marker', LINE_KEY = 'line';   function clickMap(pos) {     var buttons = document.markerForm.markerGroup;         for (var i = 0; i < buttons.length; i++) if (buttons[i].checked) {         marker = markers[buttons[i].value];                 var cnt = marker.points.length         if (cnt >= 10) {             alert('이 예제에서 마커는 10개까지만 허용됩니다.');             continue;         }                 var ch = String.fromCharCode(marker.offset + cnt + 1);         var iconUrl = marker.prefix + ch + '.gif';         var newMarker = new NMark(pos, new NIcon(iconUrl, new NSize(15, 14)));         mapObj.addOverlay(newMarker,MARKER_KEY);         marker.points.push(newMarker.getPoint());     } }   function find() {     var near = null;     var nearDist = Number.MAX_VALUE;     var offices = markers['office'].points;     var homes = markers['home'].points;         for (var i = 0; i < homes.length; i++) {         var home = homes[i];         var dist = 0;         for (var j in offices) {             dist += offices[j].distance(home);         }         if (dist < nearDist) {             near = home;             nearDist = dist;         }     }         if (!near) {         return;     }         var minx = near.getX(), maxx = near.getX();     var miny = near.getY(), maxy = near.getY();     for (var i = 0; i < offices.length; i++) {         office = offices[i];         minx = Math.min(office.getX(), minx);         maxx = Math.max(office.getX(), maxx);         miny = Math.min(office.getY(), miny);         maxy = Math.max(office.getY(), maxy);     }         mapObj.setBound(minx, maxy, maxx, miny);         mapObj.clearOverlays(LINE_KEY);         for (var i = 0; i < offices.length; i++) {         line = new NPolyline();         line.addPoints(near, offices[i]);         mapObj.addOverlay(line, LINE_KEY);     } }   function clearMarkers() {     for (var attr in markers) {         markers[attr].points = [];     }         mapObj.clearOverlays(MARKER_KEY);     mapObj.clearOverlays(LINE_KEY); }

최적 지점 찾기 끝

여기까지 네이버 OpenAPI 지도 API를 이용한 최적 지점 찾기에 대해 알아보았습니다. 많이 어려우시죠..?
다음에는 네이버 OpenAPI를 활용하여 약도 지도를 작성해 보도록 하겠습니다.