본문 바로가기

Web/Javascript|TypeScript

[JAVASCRIPT] Navigator (위도, 경도)

반응형

날씨 제공용으로 접속자의 위치를 알고싶어서 찾아봤던 Navigator.

 

결론0. Doc 보면 바로 알 수 있다.

 

결론1. chrome 50부터는 https 에서만 사용할 수 있다. 

(Starting with Chrome 50, Chrome no longer supports obtaining the user's location using the HTML5 Geolocation API from pages delivered by non-secure connections. )

 

결론2. 바로 테스트해볼 수 있는 코드

코드가 안된다면 https 로 접속을 안했거나 https로 접속 후 권한 요청에 승인을 안했을 경우이다.

navigator.geolocation.getCurrentPosition((position)=>{console.log("현재 사용자는 위도 " + position.coords.latitude + ", 경도 " + position.coords.longitude + "에 위치하고 있습니다.")}, (err)=>{console.log(err)});

 

별첨 1. 테스트 사이트 및 코드

https://tcpschool.com/examples/tryit/tryhtml.php?filename=html5_api_geolocation_02 

 

©TCP-tryWWW

HTML5 API Geolocation geolocation에서의 오류 처리 현재 위치의 위도와 경도 var loc = document.getElementById("myLocation"); function findLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showYourLocation, sh

tcpschool.com

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML5 API Geolocation</title>
</head>

<body>

	<h1>geolocation에서의 오류 처리</h1>

	<button onclick="findLocation()">현재 위치의 위도와 경도</button>
	<p id="myLocation"></p>

	<script>
		var loc = document.getElementById("myLocation");
		function findLocation() {
			if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(showYourLocation, showErrorMsg);
			} else { 
				loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타납니다!";
			}
		}

		function showYourLocation(position) {
			loc.innerHTML = "현재 사용자는 위도 " + position.coords.latitude + ", 경도 " + position.coords.longitude + "에 위치하고 있습니다.";	
		}

		function showErrorMsg(error) {
			switch(error.code) {
				case error.PERMISSION_DENIED:
				loc.innerHTML = "이 문장은 사용자가 Geolocation API의 사용 요청을 거부했을 때 나타납니다!"
				break;
				case error.POSITION_UNAVAILABLE:
				loc.innerHTML = "이 문장은 가져온 위치 정보를 사용할 수 없을 때 나타납니다!"
				break;
				case error.TIMEOUT:
				loc.innerHTML = "이 문장은 위치 정보를 가져오기 위한 요청이 허용 시간을 초과했을 때 나타납니다!"
				break;
				case error.UNKNOWN_ERROR:
				loc.innerHTML = "이 문장은 알 수 없는 오류가 발생했을 때 나타납니다!"
				break;
			}
		}
	</script>

</body>

</html>

 

 

https://developer.mozilla.org/ko/docs/Web/API/Navigator

 

Navigator - Web API | MDN

Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타냅내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/API/Geolocation

 

Geolocation - Web API | MDN

Geolocation 인터페이스는 장치의 위치를 가져오는 방법을 나타냅니다. Geolocation을 사용하면 웹 사이트나 웹 앱이 위치 정보를 활용해, 현재 위치에 대해 맞춤 콘텐츠를 제공할 수 있습니다.

developer.mozilla.org

https://w3c.github.io/geolocation-api/

 

Geolocation API

Introduction The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation. Common sources of location information include Global Positioning System (GPS) and location inferred from ne

w3c.github.io

 

반응형