Mark Up/Html Geolocation
    Dexter_-   2018. 10. 11. 13:05
  • 728x90
    반응형


    Geolocation


    geolocation API


    HTML5 API에서 새롭게 추가된 API는 모두 자바스크립트로 구현되어 있다.


    geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API이다.

    사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송된다.


    이것을 이용하면 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있다.

    하지만 이러한 정보는 사용자의 사생활을 침해할 가능성이 높으므로, 사용자의 동의 없이는 사용할 수 없도록 하고 있다.


    geolocation API를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.


     요소

     

     

     

     

    geolocation

    9.0

    5.0~49.0(http)

    50.0(https)

    3.5

    5.0

    16.0 


    크롬 50.0 버전부터는 https와 같은 보안 프로토콜에서만 geolocation API가 동작하도록 허용하고 있다.



    getCurrentPosition( ) 메소드


    getCurrentPosition( ) 메소드를 이용하면 사용자의 위치에 대한 위도와 경도값을 얻을 수 있다.

    이 메소드의 첫 번째 인수로는 가져온 사용자의 위치 정보를 출력하는 함수가 들어간다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 API Geolocation</title>
    </head>
     
    <body>
     
        <h1>geolocation을 이용한 위도와 경도 찾기</h1>
     
        <button onclick="findLocation()">현재 위치의 위도와 경도</button>
        <p id="myLocation"></p>
     
        <script>
            var loc = document.getElementById("myLocation");
            function findLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showYourLocation);
                } else { 
                    loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타납니다!";
                }
            }
     
            function showYourLocation(position) {
                loc.innerHTML = "현재 사용자는 위도 " + position.coords.latitude + ", 경도 " + position.coords.longitude + "에 위치하고 있습니다.";    
            }
       </script>
     
    </body>
     
    </html>
    		cs


    실행결과 :

    geolocation을 이용한 위도와 경도 찾기



    이 메소드의 두 번째 인수로서 위치 정보에 관한 오류를 처리하는 함수가 들어간다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 API Geolocation</title>
    </head>
     
    <body>
     
        <h1>geolocation에서의 오류 처리</h1>
     
        <button onclick="findLocation()">현재 위치의 위도와 경도</button>
        <p id="myLocation"></p>
     
        <script>
            var loc = document.getElementById("myLocation");
            function findLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showYourLocation, showErrorMsg);
                } else { 
                    loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타납니다!";
                }
            }
     
            function showYourLocation(position) {
                loc.innerHTML = "현재 사용자는 위도 " + position.coords.latitude + ", 경도 " + position.coords.longitude + "에 위치하고 있습니다.";    
            }
     
            function showErrorMsg(error) {
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                    loc.innerHTML = "이 문장은 사용자가 Geolocation API의 사용 요청을 거부했을 때 나타납니다!"
                    break;
                    case error.POSITION_UNAVAILABLE:
                    loc.innerHTML = "이 문장은 가져온 위치 정보를 사용할 수 없을 때 나타납니다!"
                    break;
                    case error.TIMEOUT:
                    loc.innerHTML = "이 문장은 위치 정보를 가져오기 위한 요청이 허용 시간을 초과했을 때 나타납니다!"
                    break;
                    case error.UNKNOWN_ERROR:
                    loc.innerHTML = "이 문장은 알 수 없는 오류가 발생했을 때 나타납니다!"
                    break;
                }
            }
       </script>
     
    </body>
     
    </html>
    		cs


    이처럼 가져온 사용자의 위치 정보를 구글 맵을 통해 표시할 수 있다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html>
    <html lang="ko">
     
    <head>
        <meta charset="UTF-8">
        <title>HTML5 API Geolocation</title>
    </head>
     
    <body>
     
        <h1>구글 맵을 통한 사용자의 위치 표시</h1>
     
        <button onclick="findLocation()">사용자의 위치 표시</button>
        <p id="myLocation"></p>
        <div id="mapLocation"></div>
     
        <script>
            var loc = document.getElementById("myLocation");
            function findLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showYourLocation, showErrorMsg);
                } else { 
                    loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타납니다!";
                }
            }
     
            function showYourLocation(position) {
                var userLat = position.coords.latitude;
                var userLng = position.coords.longitude;
                var imgUrl = "http://maps.googleapis.com/maps/api/staticmap?center=" + userLat + "," + userLng + "&zoom=15&size=500x400&sensor=false";
                document.getElementById("mapLocation").innerHTML = "<img src='"+imgUrl+"'>";
            }
     
            function showErrorMsg(error) {
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                    loc.innerHTML = "이 문장은 사용자가 Geolocation API의 사용 요청을 거부했을 때 나타납니다!"
                    break;
                    case error.POSITION_UNAVAILABLE:
                    loc.innerHTML = "이 문장은 가져온 위치 정보를 사용할 수 없을 때 나타납니다!"
                    break;
                    case error.TIMEOUT:
                    loc.innerHTML = "이 문장은 위치 정보를 가져오기 위한 요청이 허용 시간을 초과했을 때 나타납니다!"
                    break;
                    case error.UNKNOWN_ERROR:
                    loc.innerHTML = "이 문장은 알 수 없는 오류가 발생했을 때 나타납니다!"
                    break;
                }
            }
       </script>
     
    </body>
     
    </html>
    		cs


    위의 예제처럼 단순한 이미지로 표시하는 것이 아닌 구글 맵 스크립트를 이용한 연동도 가능하다.


    예제

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    function showYourLocation(position) {
     
        var userLat = position.coords.latitude;
     
        var userLng = position.coords.longitude;
     
        var userLocation = new google.maps.LatLng(userLat, userLng);
     
        loc = document.getElementById("mapLocation");
     
        loc.style.width = '500px';
     
        loc.style.height = '400px';
     
        var mapOptions = { 
     
            center: userLocation, 
     
            zoom: 15, 
     
            mapTypeId: google.maps.MapTypeId.ROADMAP,
     
            mapTypeControl: false, 
     
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL} 
     
        }
     
        var map = new google.maps.Map(loc, mapOptions);
     
        var marker = new google.maps.Marker({position:userLocation,map:map,title:"여기가 현재 위치입니다!"});
     
    }
    		cs



    Geolocation API 메소드


    Method

    설명

    getCurrentPosition( )

    사용자의 현재 위치를 가져옴.

    watchPosition( )

    사용자의 현재 위치를 가져오고 나서, 사용자의 움직임에 따라 지속적으로 위치 정보를 갱신함.

    clearWatch( )

    watchPosition( ) 메소드의 실행을 중지함.



    getCurrentPosition( ) 메소드의 반환값



    속성

    반환값

    coords.latitude

    소수로 표현된 위도 값

    coords.longitude

    소수로 표현된 경도 값

    coords.accuracy

    위도 값과 경도 값의 정확도

    coords.altitude

    평균 해수면을 기준으로 하는 고도 값(해발)

    coords.altitudeAccuracy

    고도 값의 정확도

    coords.heading

    북쪽을 기준으로 현재 진행 방향에 대한 시계방향으로의 각도 값(˚)

    coords.speed

    초당 이동한 미터 수를 나타내는 속도 값(초속)

    timestamp

    위치 정보를 가져온 시간을 나타냄




    728x90
    반응형
    저작자표시 비영리 변경금지

    'Mark Up > Html' 카테고리의 다른 글

    Web Storage  (0) 2018.10.11
    Drag and Drop  (0) 2018.10.11
    Canvas vs SVG  (0) 2018.10.11
    SVG  (0) 2018.10.11
    Canvas  (0) 2018.10.10

    관련글 관련글 더보기

Designed by Tistory.
상단으로

티스토리툴바