프로그래밍/HTML5
[꿀강] HTML5 Geolocation
착살의 숲
2018. 9. 13. 01:53
반응형
Geolocation은 사용자의 현재 위치를 표시하는 역할을 한다.
물론 사용자의 현재 위치를 표시하기 위해선 먼저 사용자의 동의가 필요하다.
또한 인터넷이 연결 되어 있어야만 현재 위치값을 가져올 수 있다.
아래 소스를 참고하시기 바란다.
<!DOCTYPE html>
<html>
<head>
<title>비부스 꿀강</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>비부스 꿀강</h1>
<p>
현재 위치 (위도, 경도):<br/>
<span id="currentLat"></span>°, <span id="currentLon"></span>°
</p>
<script>
window.onload = function() {
<html>
<head>
<title>비부스 꿀강</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>비부스 꿀강</h1>
<p>
현재 위치 (위도, 경도):<br/>
<span id="currentLat"></span>°, <span id="currentLon"></span>°
</p>
<script>
window.onload = function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById("currentLat").innerHTML = position.coords.latitude;
document.getElementById("currentLon").innerHTML = position.coords.longitude;
}, function(error) {
alert("Error occurred. Error code: "+error.code);
});
}
};
</script>
</body>
</html>
위도와 경도를 표시해 줄 수 있고 지도 화면에 현재 위치를 표시해 줄 수 있다.
특히 모바일에서 주로 사용되어 질거라고 보여진다.
반응형