HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 비디오(비디오)HTML5 드래그 앤 드롭

HTML5 지리정보

HTML5 Geolocation(지리정보)는 사용자 위치를 정위합니다.

사용자 위치 정위

HTML5 Geolocation API는 사용자의 위치를 얻기 위해 사용됩니다.

이 기능은 사용자의 개인정보를 침해할 수 있으므로, 사용자가 동의하지 않는 한 사용자 위치 정보는 사용할 수 없습니다.

브라우저 지원

Internet Explorer 9+, Firefox, Chrome, Safari 및 Opera는 Geolocation(지리정보)를 지원합니다.

주의: Geolocation(지리정보)는 GPS를 장착한 장치(예: iPhone)에서 더 정확한 지리정보를 제공합니다.

HTML5 - 지리정보 사용

getCurrentPosition() 메서드를 사용하여 사용자 위치를 얻으십시오.

다음은 사용자 위치의 경도와 위도를 반환할 수 있는 간단한 지리정보 위치 예제입니다:

예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼 웹(w3</title>/</head>　
</</body>
<body>
<p id="demo">버튼을 클릭하여 현재 위치를 얻을 수 있습니다. (지정된 위치를 얻기 위해 시간이 걸릴 수 있습니다)：</</button>
<button onclick="getLocation()">누르세요</버튼>
<script>
var　x=document.getElementById("demo");
function　getLocation()
{
　　　　if　(navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="이 브라우저는 위치를 가져오지 않습니다.";
　　　　}
}
function　showPosition(position)
{
　　　　x.innerHTML="위도:　"　+　position.coords.latitude　+　
　　　　"<br>경도:　"　+　position.coords.longitude;　　　　
}
</script>
</body>
</html>

테스트해 보세요 ‹/›

示例解析:

检测是否支持地理定位
지원되면 getCurrentPosition() 메서드를 실행합니다. 지원되지 않으면 사용자에게 메시지를 표시합니다.
getCurrentPosition() 메서드가 성공적으로 실행되면, showPosition() 매개변수에 지정된 함수에 coordinates 객체를 반환합니다
showPosition() 함수는 경도와 위도를 얻고 표시합니다

위의 예제는 오류 처리를 포함하지 않는 매우 기본적인 지리적 위치 스크립트입니다.

处理错误和拒绝

getCurrentPosition() 메서드의 두 번째 파라미터는 오류 처리를 위해 사용됩니다. 사용자 위치를 얻을 수 없을 때 실행되는 함수를 지정합니다:

예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(w3</title>/</head>　
</</body>
<body>
<p id="demo">버튼을 클릭하여 현재 위치를 얻을 수 있습니다. (지정된 위치를 얻기 위해 시간이 걸릴 수 있습니다)：</</button>
<button onclick="getLocation()">누르세요</버튼>
<script>
var　x=document.getElementById("demo");
function　getLocation()
{
　　　　if　(navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="이 브라우저는 위치정정을 지원하지 않습니다.";
　　　　}
}
function　showPosition(position)
{
　　　　x.innerHTML="위도:　"　+　position.coords.latitude　+　
　　　　"<br>경도:　"　+　position.coords.longitude;　　　　
}
function showError(error)
{
　　　　switch(error.code)　
　　　　{
　　　　　　　　case error.PERMISSION_DENIED:
　　　　　　　　　　　　x.innerHTML="사용자가 위치 정보를 얻는 요청을 거부했습니다.";
　　　　　　　　　　　　break;
　　　　　　　　case error.POSITION_UNAVAILABLE:
　　　　　　　　　　　　x.innerHTML="위치 정보는 사용할 수 없습니다.";
　　　　　　　　　　　　break;
　　　　　　　　case error.TIMEOUT:
　　　　　　　　　　　　x.innerHTML="사용자 위치 요청이 지연되었습니다."
　　　　　　　　　　　　break;
　　　　　　　　case error.UNKNOWN_ERROR:
　　　　　　　　　　　　x.innerHTML="알 수 없는 오류."
　　　　　　　　　　　　break;
　　　　}
}
</script>
</body>
</html>

테스트해 보세요 ‹/›

错误代码：

Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时

지도에서 결과 표시

지도에서 결과를 표시하려면, 경도와 위도를 사용할 수 있는 지도 서비스에 접근해야 합니다. 예를 들어, 구글 맵이나 백도어 맵 등입니다:

예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(w3</title>/</head>　
</</body>
<body>
<p id="demo">버튼을 클릭하여 현재 위치를 얻을 수 있습니다. (지정된 위치를 얻기 위해 시간이 걸릴 수 있습니다)：</</button>
<button onclick="getLocation()">누르세요</버튼>
<div id="mapholder"></div>
<script>
var　x=document.getElementById("demo");
function　getLocation()
{
　　　　if　(navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="이 브라우저는 위치를 가져오지 않습니다.";
　　　　}
}
function　showPosition(position)
{
　　　　var latlon=position.coords.latitude+","+position.coords.longitude;
　　　　var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
　　　　+latlon+"&zoom=14&size=400x300&sensor=false";
　　　　document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
function showError(error)
{
　　　　switch(error.code)　
　　　　{
　　　　　　　　case error.PERMISSION_DENIED:
　　　　　　　　　　　　x.innerHTML="사용자가 위치 정보를 얻는 요청을 거부했습니다.";
　　　　　　　　　　　　break;
　　　　　　　　case error.POSITION_UNAVAILABLE:
　　　　　　　　　　　　x.innerHTML="위치 정보는 사용할 수 없습니다.";
　　　　　　　　　　　　break;
　　　　　　　　case error.TIMEOUT:
　　　　　　　　　　　　x.innerHTML="사용자 위치 요청이 지연되었습니다."
　　　　　　　　　　　　break;
　　　　　　　　case error.UNKNOWN_ERROR:
　　　　　　　　　　　　x.innerHTML="알 수 없는 오류."
　　　　　　　　　　　　break;
　　　　}
}
</script>
</body>
</html>

테스트해 보세요 ‹/›

위의 예제에서는, 반환된 위도와 경도 데이터를 사용하여 구글 맵에서 위치를 표시합니다 (정적 이미지 사용).

Google 맵 스크립트
위의 링크는 스크립트를 사용하여 표시, 줌, 드래그 옵션을 가진 상호작용형 지도를 표시하는 방법을 보여줍니다.

지정된 위치의 정보

이 페이지는 지도에서 사용자 위치를 표시하는 방법을 보여줍니다. 그러나, 지리정보는 지정된 위치에 대한 정보를 얻기 위해도 매우 유용합니다.

예제:

로컬 정보 업데이트
사용자 주위의 관심 포인트를 표시
실시간차량 내비게이션 시스템 (GPS)

getCurrentPosition() 메서드 - 데이터 반환

T성공 시, getCurrentPosition() 메서드는 객체를 반환합니다. 항상 latitude, longitude 및 accuracy 속성이 반환됩니다. 사용 가능하다면 다음 속성도 반환됩니다.

속성	설명
coords.latitude	정수의 위도
coords.longitude	정수의 경도
coords.accuracy	위치 정확도
coords.altitude	고도, 해수면에서의 미터로
coords.altitudeAccuracy	위치의 고도 정확도
coords.heading	방향, 정북을 기준으로 도로 측정
coords.speed	속도, 미터로/초당
timestamp	응답의 날짜/시간

Geolocation 객체 - 다른 흥미로운 메서드

watchPosition() - 사용자의 현재 위치를 반환하고, 사용자가 이동할 때마다 업데이트된 위치를 반환합니다 (예: 차량의 GPS와 마찬가지로).

clearWatch() - watchPosition() 메서드를 중지하십시오

아래의 예제는 watchPosition() 메서드를 보여줍니다. 이 예제를 테스트하기 위해 정확한 GPS 장치가 필요합니다. (예: iPhone):

예제

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(w3</title>/</head>　
</</body>
<body>
<p id="demo">버튼을 클릭하여 현재 위치를 얻을 수 있습니다. (지정된 위치를 얻기 위해 시간이 걸릴 수 있습니다)：</</button>
<button onclick="getLocation()">누르세요</버튼>
<script>
var　x=document.getElementById("demo");
function　getLocation()
{
　　　　if　(navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.watchPosition(showPosition);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="이 브라우저는 위치를 가져오지 않습니다.";
　　　　}
}
function　showPosition(position)
{
　　　　x.innerHTML="위도:　"　+　position.coords.latitude　+　
　　　　"<br>경도:　"　+　position.coords.longitude;　　　　
}
</script>
</body>
</html>

테스트해 보세요 ‹/›

HTML5 비디오(비디오)HTML5 드래그 앤 드롭