지오 로케이션은 페이지에서 현재 디바이스(pc나 스마트폰 등)의 위치를 알아내는 방법이다.
값은 위도와 경도 값으로 반환된다.
navigator.geolocation.getCurrentPosition(function(position) {
사용할 위치 관련 내용
});
예를 통해 position키워드를 어떻게 쓰는지 알아보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>지오 로케이션</h1>
<h5>현재 위치 가져오기</h5>
<p>getCurrentPosition()을 호출하여 사용자의 현재 위치를 가져온다.<br>
응답은 빠르지만 정확도는 낮다.</p>
<button onclick="test1();">실행확인</button>
<script type="text/javascript">
function test1() {
navigator.geolocation.getCurrentPosition(function(position) {
alert("위도 : " + position.coords.latitude + "\n" + "경도 : " + position.coords.longitude);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
// 다음 지도와 연결되고 위치정보를 전달하여 현재 위치를 지도에 띄운다.
// 정확도가 떨어진다.
location.href="http://map.daum.net/link/map/나의위치," + lat + "," + lon;
});
}
</script>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-020.이벤트 전달 (버블링, 방지), stopPropagation, cancelBubble (0) | 2018.11.15 |
|---|---|
| [JS]04-018.DOM(Document Object Model), getElementById, createElement, createTextNode, appendChild, 속성 지정 및 추가, querySelector (0) | 2018.11.15 |
| [JS]04-016.JS의 캡슐화 및 상속 (0) | 2018.11.15 |
| [JS]04-015.JS의 객체 관련 키워드(instanceof 키워드, new와 {} 생성의 차이점) (0) | 2018.11.14 |
| [JS]04-014.JS의 객체 배열과 생성자 함수 (0) | 2018.11.14 |