■ 지오로케이션
-. 지오로케이션은 현재 위치를 찾는 기능이다.
-. 데스크톱의 웹 브라우저를 사용하면 사용자의 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> |
# 출력결과