naver map / 네이버 지도 오픈 api / 네이버 지도 api / 면적재기 / 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="polygonMeasurementBtn" class="btn" href="javascript:polygonMeasurement()">면적재기</a>';
    html += '</div>';
btn.createControl(html, {position:{left:295,top:15}});
oMap.addControl(btn);
         
// 도형 버튼 추가
var btn = new nhn.api.map.CustomControl();
var html = '';
    html += '<div style="position: absolute;">';
    html += '<a class="lineBtn" id="polygonMeasurementResetBtn" class="btn" href="javascript:polygonMeasurementReset()">초기화</a>';
    html += '</div>';
btn.createControl(html, {position:{left:355,top:15}});
oMap.addControl(btn);

 

 

 

실시간 교통 버튼 옆에 면적재기 / 초기화 버튼이 생성되었다.

 

2. 면적재기 버튼 기능 함수 구현

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

 - 간략한 설명 :

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

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

polygonMeasurementReset() : 초기화 버튼의 함수 / 면적재기를 했던 객체들을 초기화함

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

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

 

// 면적재기
 var polygonMeasurementStatus = true;
 function polygonMeasurement() {
  polygonMeasurementBtnStatus();
 }
 
 // 도형 정의
 var polygonArr = new ArrayList();
 var oPolygon;
 function setPolygon() {
  // 도형정의
  oPolygon = new nhn.api.map.Polygon([]);
  oPolygon.setStyle({
   strokeColor : '#FF0000',
   strokeStyle : 'solid',
   fillOpacity : 0.5
  });
  polygonArr.add(oPolygon);
  oMap.addOverlay(oPolygon);
 }
 
 // 면적재기 버튼 토글키
 function polygonMeasurementBtnStatus() {
  if (polygonMeasurementStatus) { // 버튼 눌림
   setPolygon();
   getPolygonInfoWindow();
   polygonMeasurementStatus = false;
   polygonInfoWindowStatus = false;
   $("#polygonMeasurementBtn").css("background-color", "#5F00FF").css(
     "color", "#FFFFFF");
  } else { // 버튼 해제
   if(!polygonInfoWindowStatus){
    visiblePolygonInfoWindow();
   }
   polygonMeasurementStatus = true;
   polygonInfoWindowStatus = true;
   $("#polygonMeasurementBtn").css("background-color", "#F6F6F6").css(
     "color", "#000000");
  }
 
 
 }
 
 // 면적재기 초기화
 function polygonMeasurementReset() {
  // 리스트에 있는 라인 오버레이 멥에서 모두 제거
  if (polygonArr.length() > 0) {
   for ( var i = 0; i < polygonArr.length(); i++) {
    oMap.removeOverlay(polygonArr.get(i));
   }
  }
 
  // 리스트 재 생성
  polygonArr = new ArrayList();
  
  // 면적재기 정보창 초기화
  // mapInfoTestWindow.setVisible(false); // 정보창 초기화
  if(polygonInfoWindowArr.length() > 0 ){
   for(var i=0; i < polygonInfoWindowArr.length(); i++ ){
    polygonInfoWindowArr.get(i).setVisible(false);
   }
  }
  
  // 리스트 재 생성
  polygonInfoWindowArr = new ArrayList();
 
  // 면적재기 중이면 다시 라인 오버레이 생성
  if (!polygonMeasurementStatus) {
   setPolygon();
   getPolygonInfoWindow();
  }
 }
 
 // 면적재기 정보창 정의
 var polygonInfoWindowArr = new ArrayList();
 var polygonInfoWindow = "";
 var polygonInfoWindowStatus = true;
 function getPolygonInfoWindow() {
  // - info window 생성
  polygonInfoWindow = new nhn.api.map.InfoWindow(); // - info window 생성
  polygonInfoWindow.setVisible(false); // - infowindow 표시 여부 지정.
  oMap.addOverlay(polygonInfoWindow); // - 지도에 추가.
 
  polygonInfoWindowArr.add(polygonInfoWindow);
 
 }
 
 // 면적재기 정보창 표시
 function visiblePolygonInfoWindow(){
  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">' + 
        oPolygon.getSize() + '㎡'
        +'<span></div>';
      // - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며, 
       // - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
       // - 단, DIV 의 position style 은 absolute 가 되면 안되며, 
       // - absolute 의 경우 autoPosition 이 동작하지 않습니다. 
       polygonInfoWindow.setContent(htmls);
       polygonInfoWindow.setPoint(lastOPoint);
       polygonInfoWindow.setVisible(true);
       polygonInfoWindow.setPosition({right : 0, top : 0});
       polygonInfoWindow.autoPosition();
       
       
  }
  
  // 정보창 생성 했는지 여부
     polygonInfoWindowStatus = 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(!polygonMeasurementStatus){// 면적재기
           var aPoints = oPolygon.getPoints();
           aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함.
           oPolygon.setPoints(aPoints); // - 해당 폴리라인에 배열에 저장된 점을 추가함
           
           lastOPoint = oPoint;
           
           var gonM = oPolygon.getLength(); // 면적의 둘레(m)
           var gonM2 = oPolygon.getSize(); // 면적의 넓이(㎡)
              $("#gonLat").val(oPointLat);
              $("#gonLng").val(oPointLng);
              $("#gonM").val(gonM);
              $("#gonM2").val(gonM2);
          } 
      });
 

 

도형을 그리는 중

 

 

 

4. 마우스 우클릭으로 도형그리기를 종료하고 해당 면적의 넓이(㎡)를 정보창으로 표시

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

//오른쪽 클릭 방지
document.oncontextmenu=function(){return false;};
 
 
 
// map right click
      oMap.attach('contextmenu', function(oCustomEvent) {
       // 면적재기 중일 경우
       if(!polygonMeasurementStatus){
        visiblePolygonInfoWindow();
 
       // 면적재기 버튼 토글
         polygonMeasurementBtnStatus();
       }
      });
 

 

 

오른쪽 클릭시 면적재기 기능이 끝나고 면적의 넓이를 정보창에 ㎡로 표시한다.

 

면적재기 버튼을 누르고 다른 도형을 그려 면적을 잴 수 있다.

 

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

 

네이버 지도 오픈 api

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

 

 

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