기본 콘텐츠로 건너뛰기

[네이버지도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

댓글

이 블로그의 인기 게시물

MTConnect 로 fanuc 의 facus 이용하기

참으로.. 국내 자료는 거의 없다.. 삽질에 삽질에 살집에... 거의 2주 넘게 삽질의 연속.. 먼저 1. cnc 에 facas 설정 2. cnc에 컴퓨터 하나 lan으로 연결해주고 mtconnect adapter 설치 3. 서버용으로 컴터 하나 맞춘후 mtconnect agent 설치 대략 30대 adapter 동시에 돌려보니 서버(agent)에 cpu 사용률 2% 안쪽.. 자세한 정보는 담지 않았지만 나중에 시간되면 자세하게 다루자.. 지원 가능 모델 0i, 32i, 21i 등등.. 거의 모든 i모델은 다되는듯.. cnc, mct 등..

라즈베리파이 키오스크 모드(Kiosk mode)

부팅시 화면 회전 sudo vi /boot/config.txt add display_rotate=3 ( 이와 같이 작성하면 화면이 시계 방향으로 90도 회전 ) 터치스크린까지 바꿀려면.. add lcd_rotate=3 disable_overscan=1 overscan_left=-150 overscan_right=-150 부팅 로그 감추기 sudo vi /boot/cmdline.txt 부팅 이미지 표시하기 sudo apt-get install fbi vi asplashscreen 아래 do_start 부분에서 이미지 경로를 원하는 이미지로 변경한다. #! /bin/sh ### BEGIN INIT INFO # Provides:          asplashscreen # Required-Start: # Required-Stop: # Should-Start:      # Default-Start:     S # Default-Stop: # Short-Description: Show custom splashscreen # Description:       Show custom splashscreen ### END INIT INFO do_start () {     /usr/bin/fbi -T 1 -noverbose -a /etc/sample.png        exit 0 } case "$1" in   start|"")     do_start     ;;   restart|reload|force-reload)     echo "Error: argument '$1' not supported" >&2     exit 3 ...

[네이버지도API / javascript] 네이버 지도 API v3 주소만으로 완전 간단하게 사용하기

javascript로 네이버 지도 API v3 를 쉽게 이용하는 방법을 알아보겠습니다. 위의 이미지 처럼 주소를 이용해서 커스텀 아이콘과 html로 이름을 넣어보겠습니다. - html - <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId= 클라이언트ID &submodules=geocoder"></script> <div id="map"></div> - javascript - <script type="javascript"> var map = new naver.maps.Map('map'); var myaddress = ' 서울특별시 중구 태평로1가 31 ';// 이곳에 주소를 넣어주세요. 도로명 주소나 지번 주소만 가능 naver.maps.Service.geocode({address: myaddress}, function(status, response) {     if (status !== naver.maps.Service.Status.OK) {         return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러');     }       var result = response.result;     var myaddr = new naver.maps.Point(result.items[0].point.x, result.items[0].point.y);     map.setCenter(myaddr); // 검색된 좌표로 지도 이동     // 마커 표시     var div_text = ' <div style="width:300px; posit...