728x90
반응형
안녕하세요, 이번 포스팅은 geoLocation API를 이용하여 현재 웹에 접속한 IP의 위도, 경도값을 받아보려고 합니다.
geoLocation API는 Chrome 50버전 이후로 HTTPS 환경에서만 사용 가능합니다.
http://localhost 에서는 사용이 가능하며, 테스트 목적으로, Chrome의 바로가기를 만들어서 아래와 같이 설정하면 접속은 가능합니다.
chrome.exe --unsafely-treat-insecure-origin-as-secure="http://example.com"
먼저 위도, 경도를 받아오기 위해 navigator.geolcation을 사용합니다.
<script>
var latitude = "", longitude = "";
window.onload = function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
} else {
latitude = "", longitude = "";
}
}
function onSuccess(position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
document.getElementById("result").innerHTML = "<p>성공</p>";
}
function onError() {
latitude ="N/A";
longitude = "N/A";
document.getElementById("result").innerHTML = "<p>실패</p>";
}
document.getElementById("lat").value = latitude;
document.getElementById("long").value = longitude;
</script>
다음, 위도, 경도값을 받을 입력창을 만들어줍니다.
<!Doctype html>
<html>
<head></head>
<body>
<span>위도 : </span><input type="text" id="lat" name="lat" readonly/><br/>
<span>경도 : </span><input type="text" id="long" name="long" readonly/>
</body>
</html>
위도, 경도 값이 제대로 전달 되는지 확인합니다.
위도 :
경도 :
결과 :
위치 정보를 받으려면 위치 공개를 수락해야합니다.
포스팅을 읽어주셔서 감사합니다.
다음 포스팅은 geolocation API와 지도 API를 같이 사용하여 현재 위치를 지도상에 표현하기를 포스팅하겠습니다.
참고 사이트 : blog.ip2location.com/knowledge-base/html-5-geolocation-api-and-ip-geolocation/
Geolocate using HTML 5 Geolocation API and IP geolocation - IP2Location.com
blog.ip2location.com
728x90
반응형
'javascript, jQuery > API' 카테고리의 다른 글
| [API/javascript] 구글 차트 API - jstl 데이터 필터링 (0) | 2021.04.13 |
|---|---|
| [API] Chart.js CDN 붙여넣기/ 다운로드 (0) | 2021.04.05 |
| [javascript_api] geolocation으로 받은 위도,경도로 지도에 표시하기 (2) | 2020.11.26 |
댓글