[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation

Posted at 2018. 9. 13. 13:10 | Posted in JavaScript & jQuery/JavaScript
반응형






■ 지오로케이션


-. 지오로케이션은 현재 위치를 찾는 기능이다.
-. 데스크톱의 웹 브라우저를 사용하면 사용자의 IP주소를 사용해서 현재 위치를 찾을 수 있다.
   (현재 데스크톱에서는 인터넷 익스플로러를 제외한 다른 브라우저에서만 사용 가능)
-. GPS가 포함된 스마트폰과 태블릿 PC에서는 GPS를 사용해서 현재 위치를 찾을 수 있다.



 ※ Position 객체의 구조




객체

설명

:: 1단계 객체 ::

 position

 · timestamp, coords 프로퍼티를 가지는 자바스크립트 객체이다.

:: 2단계 객체 ::

 timestamp

 · 위치를 수집한 시간을 표현하는 숫자

 coords

 · 현재의 위치를 정의하는 객체

:: 3단계 객체 ::

 heading

 · 장치가 움직이는 방향을 나타내는 숫자.

 · 이 값은 정북(똑바른 북쪽)에서 벗어난 각을 나타낸다.

 · 0도는 정북향을 나타내며 방향은 시계방향(동쪽은 90도이고, 서쪽은 270도)이다.

 · speed 값이 0이면 heading 값은 NaN이 된다.

 · 장치에서 haeading 정보를 제공할 수 없을 때 이 값은 null 이된다.

 altitude

 · 고도, 해수면을 기준으로 미터 단위

 · null일 수도 있다.

 latitude

 · 위도, 소수점을 포함하는 숫자. (X)

 accuracy

 · 미터로 위도와 경도의 정확도를 나타내는 숫자

 longitude

 · 경도, 소수점을 포함하는 숫자 (Y)

 speed

 · 장치의 속도를 나타내며, 초당 미처 값을 숫자로 나타낸다.

 · 이 값은 null 일 수 도 있다.

 altitudeAccuracy

 · 미터로 고도의 정확도를 나태내는 숫자

 · null일 수도 있다.





# 소스코드

<html>
<head>
<title>:: JAVASCRIPT 지오로케이션 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        // Geolocation 객체를 사용
        if(navigator.geolocation) {
            
            navigator.geolocation.getCurrentPosition(function(position) {
                
                // 위치를 가져오는데 성공할 경우
                jQuery.each(position.coords, function(key, item) {
                    jQuery("<h3></h3>").html("● " + key + " : " + item).appendTo("body");
                });
            }, function(error) {
                
                // 위치를 가져오는데 실패한 경우
                consol.log(error.message);
            });
        } else {
            consol.log("Geolocation을 지원하지 않는 브라우저 입니다.");
        }
    });
</script>
</head>
<body></body>
</html>




# 출력결과











■ 지오로케이션 + 다음 지도 API 연동하기




# 소스코드

<html>
<head>
<title>:: GEOLOCATION + Daum Map API ::</title>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=라이브러리키"></script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        function getLocation(position) {

            var latitud = position.coords.latitude;
            var longitude = position.coords.longitude;
        
            var mapContainer = document.getElementById("map")    // 지도를 표시할 DIV
            var mapOption = {
                  center : new daum.maps.LatLng(latitud, longitude)    // 지도의 중심좌표
                , level : 3    // 지도의 확대레벨
            };
            
            // 지도를 생성
            var map = new daum.maps.Map(mapContainer, mapOption);

            // 마커가 표시될 위치
            var markerPosition = new daum.maps.LatLng(latitud, longitude);

            // 마커를 생성
            var marker = new daum.maps.Marker({ position:markerPosition });

            marker.setMap(map);
        }

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getLocation, function(error) {
                consol.log(error.message);    
            });
        } else {
            consol.log("Geolocation을 지원하지 않는 브라우저 입니다.");
        }
    });
</script>
</head>
<body>
    <div id="map" style="width:800px;height:400px;"></div>
</body>
</html>




# 출력결과






반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] email 형식 검사하기  (0) 2018.09.27
[JavaScript] Audio 객체를 이용한 음악 재생  (0) 2018.09.27
[JavaScript] 저장소 사용하기  (0) 2018.09.07
[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기  (4) 2018.09.03
//

티스토리툴바