반응형
날씨 제공용으로 접속자의 위치를 알고싶어서 찾아봤던 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
<!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
https://developer.mozilla.org/ko/docs/Web/API/Geolocation
https://w3c.github.io/geolocation-api/
반응형
'Web > Javascript|TypeScript' 카테고리의 다른 글
[TS] typescript-excess-property-checks (0) | 2021.08.31 |
---|---|
[classnames] Could not find a declaration file for module (0) | 2021.07.07 |
[JAVASCRIPT] 한번 쯤 궁금한것 (0) | 2021.06.30 |
[Javascript] 입문/초보 참고 사이트 (0) | 2021.06.22 |
[Javascript]를 시작 한다면 한번쯤 꼭 읽어봐야할 글 (비구조할당/...) (0) | 2020.03.06 |