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