|
|
html5_위치추적
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> #map{ width : 1024px; height: 600px; } </style> <script type="text/javascript" src="../js/common.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> window.onload = function(){ document.getElementById("start").onclick = function(){ // 계속 위치정보받고 싶을때 watchPosition사용 //성공시 success함수, 실패시 error함수 호출 //maximumAge 위치정보 받은 시간 watchId = window.navigator.geolocation.watchPosition(success, error, { enableHigtAccuracy: document.getElementById("gps").checked, maximumAge: 0 }); }; document.getElementById("stop").onclick = function(){ // TODO 위치 추적을 중지한다. //watchPosition에 넣어주었는 id값을 인자로 window.navigator.geolocation.clearWatch(watchId); }; // TODO 구글맵을 불러온다.(구글맵 open api -> http://code.google.com/apis/maps) // LatLng 명령은 http://maps.google.com/maps/api/js에 정의된 클래스 // 위도, 경도를 가지고 있는 클래스 var center = new google.maps.LatLng(37.519768, 126.939769); map = new google.maps.Map(document.getElementById("map"), { mapTypeId: google.maps.MapTypeId.ROADMAP, zoom:17, center: center }); } // 위치 확인 성공 시 function success(position){ // TODO 지도의 중앙을 현재 위치로 세팅한다. 위도, 경도 인자 var center = new google.maps.LatLng( position.coords.latitude, position.coords.longitude ); map.setCenter(center); // TODO 마커 표시 var marker = new google.maps.Marker({ position: center, title: "내위치", map: map }); } // 위치 확인 실패 시 function error(error){ log("조회 실패: " + error.code); } </script> </head> <body> <h1>현재 위치 추적</h1> <button id="start">시작</button> <button id="stop">중지</button> <input type="checkbox" id="gps">GPS 사용 <div id="map"> 지도를 로딩 중입니다... </div> </body> </html> |
| 
|
