하은양 믿음군 효실맘 호홍홍집s

네이버 지도API 이용한 좌표계값확인(LatLng -> TM128) 본문

가벼운 배움/javascript

네이버 지도API 이용한 좌표계값확인(LatLng -> TM128)

호홍홍집 2016. 5. 27. 19:50

<script src='/nam_js/jquery-1.11.0.min.js'></script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/v2/maps.js?clientId=N3ZaqkcVHSWF22115eQL"></script>
<script>
 var map;
 var oMarker;
 var v_MarkerPoint;

 var oSize = new nhn.api.map.Size(28, 37);

 var oOffset = new nhn.api.map.Size(14, 37);

 var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);

 var latlng0 = new nhn.api.map.LatLng(35.5371815, 129.3428428);

 function mapload() {

  map = new nhn.api.map.Map("map_canvas" ,{
   point : latlng0,
   zoom : 13,
   enableWheelZoom : true,
   enableDragPan : true,
   enableDblClickZoom : false,
   mapMode : 0,
   activateTrafficMap : false,
   activateBicycleMap : false,
   minMaxLevel : [ 1, 14 ],
   size : new nhn.api.map.Size(827, 550)
  });

  var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
  mapTypeChangeButton = new nhn.api.map.MapTypeBtn(); // - 지도 타입 버튼 선언
  mapTypeChangeButton.setPosition({top:10, left:50}); // - 지도 타입 버튼 위치 지정
  mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
  map.addControl(mapZoom);
  map.addControl(mapTypeChangeButton);
  
  oMarker = new nhn.api.map.Marker(oIcon, {
    point : latlng0,    // 마커의 좌표
    zIndex : 1,      // 마커의 zIndex
    title : "마크"     // 타이틀    
  });
  map.addOverlay(oMarker); 
  v_MarkerPoint = oMarker.getPoint();
  $('#LatLngX').val(v_MarkerPoint.getX());
  $('#LatLngY').val(v_MarkerPoint.getY());
  $('#TM128X').val(v_MarkerPoint.toTM128().getX());
  $('#TM128Y').val(v_MarkerPoint.toTM128().getY());
  $('#UTMKX').val(v_MarkerPoint.toUTMK().getX());
  $('#UTMKY').val(v_MarkerPoint.toUTMK().getY());

  map.attach('click', function(oEvent) {
     // console.log(oEvent.point);
     v_MarkerPoint = oEvent.point; 
     // alert(v_MarkerPoint);
     $.fnGetCoordInfor('LatLng',v_MarkerPoint.getX(),v_MarkerPoint.getY());
  });

 }

 $(document).ready(function(){
  mapload();  
  
  $('#btnLatLng').click(function(event){
   var v_LatLngX = $('#LatLngX').val();
   var v_LatLngY = $('#LatLngY').val();
   $.fnGetCoordInfor('LatLng',v_LatLngX,v_LatLngY);

   event.preventDefault();
  });

  $('#btnTM128').click(function(event){
   var v_TM128X = $('#TM128X').val();
   var v_TM128Y = $('#TM128Y').val();
   $.fnGetCoordInfor('TM128',v_TM128X,v_TM128Y);

   event.preventDefault();
  });

  $('#btnUTMK').click(function(event){
   var v_UTMKX = $('#UTMKX').val();
   var v_UTMKY = $('#UTMKY').val();
   $.fnGetCoordInfor('UTMK',v_UTMKX,v_UTMKY);

   event.preventDefault();
  });

  $.fnGetCoordInfor = function(vGubun, v_X, v_Y){
   if(v_X && v_Y){
    var selXY = new nhn.api.map.LatLng(v_Y, v_X);
    if(vGubun == 'TM128') selXY = new nhn.api.map.TM128(v_X, v_Y);
    else if(vGubun == 'UTMK') selXY = new nhn.api.map.UTMK(v_X, v_Y);

    map.setCenter(selXY);
    oMarker = new nhn.api.map.Marker(oIcon, {
      point : selXY,    // 마커의 좌표
      zIndex : 1,      // 마커의 zIndex
      title : "마크"     // 타이틀    
    });
    map.addOverlay(oMarker);

    v_MarkerPoint = oMarker.getPoint(); 
    $('#LatLngX').val(v_MarkerPoint.toLatLng().getX());
    $('#LatLngY').val(v_MarkerPoint.toLatLng().getY());
    $('#TM128X').val(v_MarkerPoint.toTM128().getX());
    $('#TM128Y').val(v_MarkerPoint.toTM128().getY());
    $('#UTMKX').val(v_MarkerPoint.toUTMK().getX());
    $('#UTMKY').val(v_MarkerPoint.toUTMK().getY());
   }
  }

 });

</script>
<div id="map_canvas" style="width:827; height:550"></div><br />
<div>LatLng : <input type="text" id="LatLngX" value="" /><input type="text" id="LatLngY" value="" /><button id="btnLatLng">LatLng입력</button></div><br />
<div>TM128 : <input type="text" id="TM128X" value="" /><input type="text" id="TM128Y" value="" /><button id="btnTM128">TM128입력</button></div><br />
<div>UTMK : <input type="text" id="UTMKX" value="" /><input type="text" id="UTMKY" value="" /><button id="btnUTMK">UTMK입력</button></div><br />