반응형
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>
위도와 경도를 표시해 줄 수 있고 지도 화면에 현재 위치를 표시해 줄 수 있다.
특히 모바일에서 주로 사용되어 질거라고 보여진다.
반응형
'프로그래밍 > HTML5' 카테고리의 다른 글
| [꿀강] HTML5 Drag & Drop (드래그 앤 드롭) (0) | 2018.09.13 |
|---|---|
| [꿀강] HTML5 input 속성들 (0) | 2018.09.09 |
| [꿀강] HTML5 Form 관련 태그들 (0) | 2018.09.05 |
| [꿀강] HTML5 Canvas와 SVG가 모야? (0) | 2018.08.30 |
| [꿀강] HTML5 Video 태그와 Audio 태그 (0) | 2018.08.29 |
댓글