네이버 지도 API GPS - neibeo jido API GPS

com.example.myapp 자리에는 애플리케이션의 고유ID를 입력해야 하지만 우리는 앱에서 네이버 지도를 실행하는 것이 아니라 웹에서 실행하기 때문에 이 값에 영향을 받지 않는다.

따라서 nmap://map 으로도 네이버 지도를 실행할 수 있다.

3. 지도 검색

특정 키워드로 지도를 검색하고자 한다면 /search?query=키워드를 사용하면 된다.

예시로 부산시청으로 검색한 결과를 보여주는 URL은 다음과 같다.

nmap://search?query=%EB%B6%80%EC%82%B0%EC%8B%9C%EC%B2%AD

4. 장소 표시

지정된 좌표에 마커를 표시하고자 한다면 /place?lat=위도&lng=경도&name=이름을 사용하면 된다.

예시로 부산시청에 마커를 표시하는 URL은 다음과 같다.

nmap://place?lat=35.17982543369992&lng=129.07499499992576&name=%EB%B6%80%EC%82%B0%EC%8B%9C%EC%B2%AD

해당 장소의 좌표값을 쉽게 구하는 방법은 구글 지도를 이용하면 된다.

장소를 검색하고 우클릭하면 좌표값이 나온다.

5. 길찾기

이제 원하는 길찾기 기능이다.

/route/public 은 대중교통 길찾기, /route/car 는 자동차 길찾기, /route/walk 는 도보 길찾기다.

경로 탐색 공통 파라미터는 다음과 같다.

부산 남포동에서 부산시청까지 대중교통 길찾기 URL은 다음과 같다.

nmap://route/public?slat=35.09789741939864&slng=129.03468293094306&sname=%EB%82%A8%ED%8F%AC%EB%8F%99&dlat=35.17982543369992&dlng=129.07499499992576&dname=%EB%B6%80%EC%82%B0%EC%8B%9C%EC%B2%AD

slat, slng, sname을 입력하지 않으면 기본값인 사용자의 현 위치로 표시된다.

따라서 현재 위치에서 부산시청까지 대중교통 길찾기 URL은 다음과 같다.

nmap://route/public?dlat=35.17982543369992&dlng=129.07499499992576&dname=%EB%B6%80%EC%82%B0%EC%8B%9C%EC%B2%AD

728x90

반응형

▶ 네이버 지도 연동하기, NAVER MAP API

1. 네이버 클라우드(https://console.ncloud.com) 가입 → AI NAVER API → Application 등록

*해당 영역이 안 보일 경우 이용 신청을 한 뒤에 진행한다.
https://www.ncloud.com/product/applicationService/maps

2. 약관 동의 후 확인

3. 사용할 Maps API 체크 후 사용될 URL을 추가 후 저장한다.

4. Application 생성 완료 후 인증정보 팝업에서 Client ID 확인이 가능하다.

5. Application이 생성되었으니, 가이드대로 자바스크립트 코드를 작성한다.

HTML DIV (id="map")

<div id="map" style="width:100%;height:500px;"></div>

script (ncpClientId=Client ID)

발급받은 Client ID를 입력한다.

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=클라이언트ID&submodules=geocoder"></script>

JAVASCRIPT (현재 위치, 서울시청 위치, 내 위치로 이동 이미지 필요)

<script type="text/javascript">
    // 현재 위치로 이동 이미지
    var curtBtn = '<img src="/common/img/curt-loca-icon.png" alt="현재위치로 이동">';

    // 현재 위치 위도, 경도 좌표 객체를 담을 변수
    var curtLoca = "";

    // 서울 시청 위/경도 좌표 객체
    var sCityHallLoca = new naver.maps.LatLng(37.5666805, 126.9784147);

    // Map 초기화
    var map = new naver.maps.Map('map', {
        center: sCityHallLoca,    // X, Y 값 설정
        scaleControl: false,      // 우측 하단 scale 표시
        mapDataControl: false,    // 좌측 하단 @ NAVER Corp 표시
        zoom: 17                  // 지도 줌 레벨
    });
    
    // 서울 시청 마커 설정
    var marker = new naver.maps.Marker({
        position: sCityHallLoca,
        map: map,
        icon: { url: "/common/img/marker-target.png" }
    });
        
    // 마커 클릭 이벤트 핸들러 함수
    var makerClickHandler = function() {
        return function(e) { alert("Marker Seoul City Hall"); }
    }
    
    // 마커 클릭 이벤트 리스너 추가
    naver.maps.Event.addListener(marker, 'click', makerClickHandler());

    // Map 사용자 정의 컨트롤 이벤트 추가 (현재위치로 이동 버튼을 추가)
    naver.maps.Event.once(map, 'init_stylemap', function() {
        /*
            현재 위치로 이동 img tag 변수를 CustomControl에 설정
            표시될 위치는 맵의 우측 상단
        */
        var cstmCtrl = new naver.maps.CustomControl(curtBtn, {
            position: naver.maps.Position.RIGHT_TOP
        });

        // CustomControl를 Map에 설정
        cstmCtrl.setMap(map);

        // 클릭 이벤트 리스너 설정
        naver.maps.Event.addDOMListener(cstmCtrl.getElement(), 'click', function() {
            if (curtLoca) {
                // 얻은 좌표를 지도의 중심으로 설정
                map.setCenter(curtLoca);
                
                // 지도의 줌 레벨을 변경
                map.setZoom(17);
            }
            else {
                alert("위치 액세스가 거부되었습니다.\n사용하시려면 위치 액세스를 허용해주세요.");
            }
        });
    });
        
    // getCurrentPosition 성공 콜백 함수
    var onSuccessGeolocation = function (position) {
        // 현재위치
        curtLoca = new naver.maps.LatLng(position.coords.latitude, position.coords.longitude);
    
        // 얻은 좌표를 지도의 중심으로 설정합니다.
        map.setCenter(curtLoca);
        
        // 지도의 줌 레벨을 변경합니다.
        map.setZoom(17); 
            
        // 현재 위치에 마커 표시
        new naver.maps.Marker({
            position: curtLoca,
            map: map,
            icon: { url: "/common/img/marker-current.png" }
        });
    }

    // getCurrentPosition 에러 콜백 함수
    var onErrorGeolocation = function () {

        var agent = navigator.userAgent.toLowerCase(), name = navigator.appName;

        if (name === 'Microsoft Internet Explorer' || agent.indexOf('trident') > -1 || agent.indexOf('edge/') > -1) {
            alert("지원하지 않는 브라우져입니다.");
        }
        else {
            console.log("현재 위치를 가져오는데 에러가 발생하였습니다.");
        }
    }
    
    // Geolocation HTML5 API를 통해 얻은 현재 위치 좌표로 지도를 이동합니다.
    if (navigator.geolocation) {
        /**
         * navigator.geolocation 은 Chrome 50 버젼 이후로 HTTP 환경에서 사용이 Deprecate 되어 HTTPS 환경에서만 사용 가능 합니다.
         * http://localhost 에서는 사용이 가능하며, 테스트 목적으로, Chrome 의 바로가기를 만들어서 아래와 같이 설정하면 접속은 가능합니다.
         * chrome.exe --unsafely-treat-insecure-origin-as-secure="http://example.com"
         */
        navigator.geolocation.getCurrentPosition(onSuccessGeolocation, onErrorGeolocation);
    }
    else {
        console.log("Geolocation Not supported Required");
    }
</script>

주소로 위/경도 조회 (위의 기능과는 무관 하나 필요시 사용을 위해)

// 주소 => 위/경도 조회
var searchAddressToCoordinate = function (address) {
    naver.maps.Service.geocode({ query: address },
    function(status, response) {
        if (status === naver.maps.Service.Status.ERROR) {
            if (!address) {
                return alert('Geocode Error, Please check address');
            }
            return alert('Geocode Error, address:' + address);
        }

        if (response.v2.meta.totalCount === 0) {
            return alert('Geocode No result.');
        }

        var item = response.v2.addresses[0];
        var lat = item.y;
        var lng = item.x;
            
        console.log(item);
    });
}

6. 네이버 지도 API 결과

네이버 클라우드
https://console.ncloud.com

네이버 MAP API V3
https://navermaps.github.io/maps.js.ncp/docs/tutorial-digest.example.html

728x90

반응형

공유하기

게시글 관리

저작자표시 비영리 변경금지

• 카카오스토리
• 트위터
• 페이스북

'API (Application Programing Interface)' 카테고리의 다른 글