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( ) 메소드를 이용하면 사용자의 위치에 대한 위도와 경도값을 얻을 수 있다.

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

예제

<!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>

Colored by Color Scripter

실행결과 :

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>
Colored by Color Scripter
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>
Colored by Color Scripter
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:"여기가 현재 위치입니다!"});
 
}
Colored by Color Scripter
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

저작자표시 비영리 변경금지 (새창열림)