기본 콘텐츠로 건너뛰기

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

라즈베리파이3B ffmpeg 하드웨어 가속

라즈베리파이3B ffmpeg 하드웨어 가속.. 일단.. 혹시 깔려 있을지 모르는 ffmpeg 를 제거 하자 sudo apt remove ffmpeg git 설치 sudo apt install git build-essential h264 라이브러리 설치 git clone git://git.videolan.org/x264 cd x264 ./configure --host=arm-unknown-linux-gnueabi --enable-static --disable-opencl make -j4 sudo make install ffmpeg 설치 sudo git clone https://github.com/FFmpeg/FFmpeg.git cd FFmpeg ./configure --arch=armel --target-os=linux --enable-gpl --enable-omx --enable-omx-rpi --enable-nonfree --enable-mmal make -j4 sudo make install 시간이 엄청나게 걸린다.. 그리고 cpu 온도 80도 넘어가니 주의 할것 ㅎㅎ 이제 라즈베리파이에서 h264_mmal / h264_omx 사용가능 그러면 teheadend 에서 트랜스코딩 가능 프로파일에 있는 트렌스코딩이 아니라 우선 코딩해서 넘기는 방식 사용법은 vim transcoding.sh #!/bin/sh ffmpeg -c:v h264_mmal -i $1 -c:v h264_omx -preset ultrafast -f mpegts pipe:1 파일하나 만들고 m3u파일에 pipe:///home/pi/transcoding.sh rtp://xxx.xxx.xxx.xxx:5000 이런식으로 사용 라즈베리파이로도 tvheadend 트랜스 코딩이 가능! 동시 시청 2~3대 까지는 가능하다. ^^v -- 추가 -- 약간 쾌적하게 트랜스코딩 하는 방법 추가 했습니다. https://n...