본문 바로가기
Study/HTML5,CSS,JQuery

[HTML5/CSS3/JQUERY] geolocation, geolocation map

힝쏘 2019. 5. 22. 14:37

GEOLOCATION

Geolocation API는 프로그램을 실행하는 디바이스의 위치 정보를 얻기 위한 메소드 3개로 이루어진 간단한 JavaScript API다.

Geolocation API 관련된 메소드는 모두 window.navigator 객체에 정의 되어 있다.

 

getCurrentPosition(successCallBack, errorCallBack, options) 

현재 위치 정보를 비동기로 확인한 다음 처리 결과를 인수로 하여 successCallBack을 한번만 호출.

에러가 발생했을 때는 상세한 에러 정보를 인수로 하여 errorCallBack 호출 한다.

  • successCallBack : 위치정보 사용 가능 시 호출
  • errorCallBack: 에러 시 호출
  • options : 데이터 수집 목적으로 제공된다.

현재 위치 정보 얻는 방법

navigator.geolocation.getCurrentPosition(function(pos) {

alert("위도: "+pos.coords.latitude+", 경도: "+pos.coords.longitude);

}

 

watchPosition(successCallBack, errorCallBack, options) 

현재 위치 정보를 비동기로 확인하고 처리 결과를 인수로 지정한 콜백 메소드를 호출한다.

그 후에도 콜백 메소드는 디바이스가 위치가 변경되었다고 판단할 때마다 계속 호출한다.

메소드의 반환값은 clearWatch()에 전달할 수 있는 정수이다.

 

clearWatch(watchId)

watchPosition이 반환한 정수값을 인수로 하여 watchPosition을 종료한다. (위치정보 업데이트 중단)

 

coords의 속성

 latitude

 위도 

 longitude

 경도 

 altitude

 표고 (이용할 수 없을 때엔 null값 표시) 

 accuracy

 위도, 경도의 오차(단위&미터) 

 altitudeAccuracy

 표고의 오차(단위&미터) 

 heading

 디바이스의 진행방향, 북쪽을 기준으로 시계방향 각도로 나타낸다. (이용할 수 없을 때엔 null값 표시) 

 speed

 디바이스의 진행 속도(미터/초),  (이용할 수 없을 때엔 null값 표시)

 timestamp

 위치 정보를 얻은 시각(1970/01/01 부터의 mm second) 

 

locationTest.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
    var watchId; 
     
    window.onload = function() { 
        var startPos; 
         
        if (navigator.geolocation) { 
            navigator.geolocation.getCurrentPosition( 
                function(pos) { 
                    startPos = pos; 
                    document.getElementById("startLat").innerHTML = startPos.coords.latitude; 
                    document.getElementById("startLon").innerHTML = startPos.coords.longitude; 
                }, 
                function(error) { 
                    alert("에러 발생 코드:"+error.code); 
                },  
                { timeout:10000 } 
            ); 
             
            watchId = navigator.geolocation.watchPosition( 
                function(pos) { 
                    var lat = pos.coords.latitude; 
                    var lon = pos.coords.longitude; 
                    var acc = pos.coords.accuracy; 
                         
                    document.getElementById("currentLat").innerHTML = lat; 
                    document.getElementById("currentLon").innerHTML = lon; 
                    document.getElementById("acc").innerHTML = acc; 
                } 
            ); 
        } else { 
            alert("Geolocation 지원 안함"); 
        } 
         
        // 위치 추적 해제 버튼 
        btn = document.getElementById("btn"); 
        btn.addEventListener("click", locClear, false); 
    } 

    function locClear() { 
        navigator.geolocation.clearWatch(watchId); 
        alert("위치 추적이 해제됨"); 
    } 
</script> 
</head> 
<body> 
    <h2>시작 위치(위도, 경도)</h2> 
    <span id="startLat">?</span>&deg; 
    <span id="startLon">?</span>&deg; 
     
    <br/><br/> 
    현재위치(위도, 경도) 
    <br/> 
    <span id="currentLat">?</span>&deg; 
    <span id="currentLon">?</span>&deg; 
     
    <br/><br/> 
    정확도: 
    <br/> 
    <span id="acc">?</span>미터 정도의 정확도를 가짐 
     
    <br/><br/> 
     
    <button id="btn">위치추적 해제</button> 
</body> 
</html>

 

 

 

GOOGLE MAP API 사용하기

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

해당 링크에 있는 API의 모든 정의와 함수를 가져와 사용할 수 있다.

sensor 부분은 현재 사용자의 위치를 sensing 할것이냐의 여부를 선언한다. (true: sensing 한다, false: sensing 안한다.)

 

locationMap.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
    rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript"> 
    var infoWindow = new google.maps.InfoWindow(); 
     
    function initLocation() { 
        var myLoc = getLocation(); 
        if (myLoc == null) { 
            return false; 
        } 
         
        myLocation(myLoc); 
    } 
     
    function getLocation() { 
        if (navigator.geolocation) { 
            return navigator.geolocation; 
        } 
        document.getElementById("disp").innerHTML = "위치 정보 지원 안됨"; 
    } 
     
    function myLocation(myLoc) { 
        myLoc.getCurrentPosition( 
            function(pos) { 
                var lat = pos.coords.latitude; 
                var lon = pos.coords.longitude; 
                var initLoc = new google.maps.LatLng(lat, lon); 
                var map = new google.maps.Map( 
                    document.getElementById("map_canvas"),  
                    {  
                        zoom: 16,  
                        mapTypeId: google.maps.MapTypeId.ROADMAP  
                    } 
                ); 
                 
                map.setCenter(initLoc); 
                infoWindow.setContent("현재 내 위치"); 
                infoWindow.setPosition(initLoc); 
                infoWindow.open(map); 
            } 
        ); 
    } 
     
    window.onload = initLocation; 
</script> 
</head> 
<body> 
    <h2 id="disp">구글 맵 보기</h2> 
    <div id="map_canvas" style="width: 100%; height: 100%;"></div> 
</body> 
</html>

 

 

저작자표시

'Study > HTML5,CSS,JQuery' 카테고리의 다른 글

[HTML5/CSS3/JQUERY] web sql database  (0) 2019.05.22
[HTML5/CSS3/JQUERY] file 접근  (0) 2019.05.22
[HTML5/CSS3/JQUERY] web worker  (1) 2019.05.22
[HTML5/CSS3/JQUERY] web storage  (0) 2019.05.22
[HTML5/CSS3/JQUERY] application cache  (0) 2019.05.22

'Study/HTML5,CSS,JQuery' Related Articles

티스토리툴바