기본 콘텐츠로 건너뛰기

[네이버지도API / javascript] 지도상에서 클릭한 곳의 위도 경도, UTMK, TM128 등 알아내기

지도관련 개발을 하다보면 의외로 지도상의 위도와 경도가 필요한 순간이 많다..


- html -
<div id="map" style="width:800px;height:600px;"></div>


- javascript -

<script>
var map = new naver.maps.Map("map", {
        center: new naver.maps.LatLng(37.5666103, 126.9783882),
        zoom: 6
    }),
    infoWindow = null;

function initGeocoder() {
    var latlng = map.getCenter();
    var utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng); // 위/경도 -> UTMK
    var tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk);   // UTMK -> TM128
    var naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128); // TM128 -> NAVER

    infoWindow = new naver.maps.InfoWindow({
        content: ''
    });

    map.addListener('click', function(e) {
        var latlng = e.coord,
            utmk = naver.maps.TransCoord.fromLatLngToUTMK(latlng),
            tm128 = naver.maps.TransCoord.fromUTMKToTM128(utmk),
            naverCoord = naver.maps.TransCoord.fromTM128ToNaver(tm128);

        utmk.x = parseFloat(utmk.x.toFixed(1));
        utmk.y = parseFloat(utmk.y.toFixed(1));

        infoWindow.setContent([
            '<div style="padding:10px;width:380px;font-size:14px;line-height:20px;">',
            '<strong>LatLng</strong> : '+ latlng.toString() +'<br />',
            '<strong>UTMK</strong> : '+ utmk.toString() +'<br />',
            '<strong>TM128</strong> : '+ tm128.toString() +'<br />',
            '<strong>NAVER</strong> : '+ naverCoord.toString() +'<br />',
            '</div>'
        ].join(''));

        infoWindow.open(map, latlng);
        console.log('LatLng: ' + latlng.toString());
        console.log('UTMK: ' + utmk.toString());
        console.log('TM128: ' + tm128.toString());
        console.log('NAVER: ' + naverCoord.toString());
    });
}

naver.maps.onJSContentLoaded = initGeocoder;
</script>


아래에 들어가면 실제 동작해볼 수 있습니다.
http://dhsoftware.co.kr/addtogeo.php

댓글