naver map / 네이버 지도 오픈 api / 네이버 지도 api / line / 선그리기 / 거리재기 / 길이재기 / web / javascript

네이버 지도 api 사용방법

 

JavaScript 2.0

 

네이버 지도 기능 중 길이재기 기능을 간략히 구현해 보자

 

 

키 발급 및 기본적인 네이버 지도 설정방법은

http://developer.naver.com/wiki/pages/Tutorial_JavaScript

에서 참고 해서

기본셋팅으로 지도를 하나 그려봅니다 (API의 기본적인 내용은 생략합니다.)

 

 

1. 버튼 생성

버튼 스타일

<style>
.lineBtn  {
    display:inline;padding:4px 7px;background-color:#F6F6F6; color:#000000; border:solid 1px #000000; 
    text-decoration:none
}
</style>

 

 

라인그리기 기능을 사용할 버튼(토글)1개와 그려놓은 라인을 초기화 하는 버튼을 추가한다.

// 라인 버튼 추가
var btn = new nhn.api.map.CustomControl();
var html = '';
    html += '<div style="position: absolute;">';
    html += '<a class="lineBtn" id="lineMeasurementBtn" class="btn" href="javascript:lineMeasurement()">거리재기</a>';
    html += '</div>';
btn.createControl(html, {position:{left:130,top:15}});
oMap.addControl(btn);
        
// 라인 버튼 추가
var btn = new nhn.api.map.CustomControl();
var html = '';
    html += '<div style="position: absolute;">';
    html += '<a class="lineBtn" id="lineMeasurementResetBtn" class="btn" href="javascript:lineMeasurementReset()">초기화</a>';
    html += '</div>';
btn.createControl(html, {position:{left:190,top:15}});
          oMap.addControl(btn);

 

 

일반/위성 버튼 옆에 거리재기 / 초기화 버튼이 생성되었다.

 

 

 

2. 거리재기 버튼 기능 함수 구현

- javascript로 구현한 ArrayList가 필요하다. http://cofs.tistory.com/8

 - 간략한 설명 :

lineMeasurementBtnStatus() : 버튼은 토글키로 구현 ( 버튼의 기능을 키고 끄는 역할 )

setPolyline() : 선을 정의한 객체를 생성하고 리스트로 관리하며 맵에 추가

lineMeasurementReset() : 초기화 버튼의 함수 / 거래재기를 했던 객체들을 초기화함

getPolylineInfoWindow() : 선을 그리다 끝냈을 경우 나타낼 정보창 객체를 생성하고 리스트로 관리하며 맵에 추가

visiblePolylineInfoWindow() : 정보창의 내용설정과 표시하기

 

// 거리재기
 var lineMeasurementStatus = true; // 거리재기 버튼의 상태값
 function lineMeasurement(){
  lineMeasurementBtnStatus();
 }
 
 // 선 정의
 var polylineArr = new ArrayList(); 
 var oPolyline;
 function setPolyline(){
  // 선 정의
      oPolyline = new nhn.api.map.Polyline([], {
           strokeColor : '#f00', // - 선의 색깔
           strokeWidth : 5, // - 선의 두께
           strokeOpacity : 0.5 // - 선의 투명도
    }); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음.
    
    polylineArr.add(oPolyline);
  oMap.addOverlay(oPolyline); // - 지도에 선을 추가함.
 }
 
 // 거리재기 버튼 토글키
 function lineMeasurementBtnStatus(){
  if(lineMeasurementStatus){ // 버튼 눌림
   setPolyline(); // 선 정의
   getPolylineInfoWindow(); // 정보창 정의
   lineMeasurementStatus = false;
   polylineInfoWindowStatus = false;
   $("#lineMeasurementBtn").css("background-color","#5F00FF").css("color","#FFFFFF");
  }else{ // 버튼 해제
   if(!polylineInfoWindowStatus){
    visiblePolylineInfoWindow(); 
   }
   lineMeasurementStatus = true;
   polylineInfoWindowStatus = true;
   $("#lineMeasurementBtn").css("background-color","#F6F6F6").css("color","#000000");
  }
  
 }
 
 // 거리재기 초기화
 function lineMeasurementReset(){
  // 리스트에 있는 라인 오버레이 멥에서 모두 제거
  if(polylineArr.length() > 0 ){
   for(var i=0; i < polylineArr.length(); i++ ){
    oMap.removeOverlay(polylineArr.get(i));
   }
  }
  
  // 리스트 재 생성
  polylineArr = new ArrayList();
  
  // 거리재기 정보창 초기화
  if(polylineInfoWindowArr.length() > 0 ){
   for(var i=0; i < polylineInfoWindowArr.length(); i++ ){
    polylineInfoWindowArr.get(i).setVisible(false);
   }
  }
  
  // 리스트 재 생성
  polylineInfoWindowArr = new ArrayList();
  
  // 거리재기 중이면 다시 라인 오버레이 생성
  if(!lineMeasurementStatus){
   setPolyline();
   getPolylineInfoWindow();
  }
 }
 
 // 선 정보창 정의
 var polylineInfoWindowArr = new ArrayList();
 var polylineInfoWindow = "";
 var polylineInfoWindowStatus = true;
 function getPolylineInfoWindow() {
  // - info window 생성
  polylineInfoWindow = new nhn.api.map.InfoWindow(); // - info window 생성
  polylineInfoWindow.setVisible(false); // - infowindow 표시 여부 지정.
  oMap.addOverlay(polylineInfoWindow); // - 지도에 추가.
 
  polylineInfoWindowArr.add(polylineInfoWindow);
 
 }
 
 // 거리재기 정보창 표시
 function visiblePolylineInfoWindow(){
  if(lastOPoint != ""){
   var htmls = "";
     htmls =   '<DIV style="border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;">'+
        '<span style="color: #000000 !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing: -1px !important;white-space: nowrap !important; padding: 2px 2px 2px 2px !important">' + 
        oPolyline.getLength() + 'm'
        +'<span></div>';
      // - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며, 
       // - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
       // - 단, DIV 의 position style 은 absolute 가 되면 안되며, 
       // - absolute 의 경우 autoPosition 이 동작하지 않습니다. 
       polylineInfoWindow.setContent(htmls);
       polylineInfoWindow.setPoint(lastOPoint);
       polylineInfoWindow.setVisible(true);
       polylineInfoWindow.setPosition({right : 0, top : 0});
       polylineInfoWindow.autoPosition();
       
       
  }
   // 정보창 생성 했는지 여부
      polylineInfoWindowStatus = true;
      
      lastOPoint = "";
 }
 

 

 

3. 맵의 클릭 함수 안에서 거리재기 기능 실행

 - 거리재기 기능이 켜있을 경우 지도에 라인을 그린다.

var lastOPoint = ""; // 라인이 클릭된 마지막 포인트
 
// map click
      oMap.attach('click', function(oCustomEvent) {
          var oPoint = oCustomEvent.point; // 클릭 포인트
          
          var oPointArray = oPoint.toString().split(',');
          var oPointLng = oPointArray[0];
          var oPointLat = oPointArray[1];
          
          
 
          // 거리재기
          if(!lineMeasurementStatus){
 
           var aPoints = oPolyline.getPoints(); // - 현재 폴리라인을 이루는 점을 가져와서 배열에 저장.
            aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함.
            oPolyline.setPoints(aPoints); // - 해당 폴리라인에 배열에 저장된 점을 추가함
            
            var lineM = oPolyline.getLength(); // 라인의 거리(m)
            
            lastOPoint = oPoint; // 마지막 포인트를 저장한다.
           
          }
          
      });
 

 

 

 

 

 

선을 그리는 중

 

 

 

4. 마우스 우클릭으로 선그리기를 종료하고 해당 선의 길이(m)를 정보창으로 표시

 - Opera 브라우저는 지원하지 않는다(Opera 10.5 기준).

//오른쪽 클릭 방지
document.oncontextmenu=function(){return false;};
 
 
 
// map right click
      oMap.attach('contextmenu', function(oCustomEvent) {
       // 거리재기 중일 경우
       if(!lineMeasurementStatus){
        // 거리재기 정보창 표출
        visiblePolylineInfoWindow();
 
        // 거리재기 버튼 토글
        lineMeasurementBtnStatus();
       }
      });
 

 

 

 

 

오른쪽 클릭시 거리재기 기능이 끝나고 선의 길이를 정보창에 m로 표시한다.

 

 

거리재기 버튼을 누르고 다른 선을 그려 거리를 잴 수 있다.

 

 

초기화 버튼을 누르면 화면에 보여지는 선과 정보창들이 모두 초기화 된다.

 

네이버 지도 오픈 api

http://developer.naver.com/wiki/pages/MapAPI

 

 

 

 

도움이 되셨다면 공감을 부탁드립니다. ^^