HTML5 위치정보


HTML5 위치정보는 사용자의 위치를 ​​찾는 데 사용됩니다.

사용자 위치 찾기

HTML5 Geolocation API는 사용자의 지리적 위치를 얻는 데 사용됩니다.

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

브라우저 지원

Internet Explorer

Internet Explorer 9+, Firefox, Chrome, Safari 및 Opera에서 위치정보를 지원합니다.

참고: 지리위치(Geolocation) iPhone과 같이 GPS가 있는 기기의 경우 위치정보가 더 정확합니다.

HTML5 - 지리적 위치 사용

사용자 위치를 가져오려면 getCurrentPosition() 메서드를 사용하세요.

다음 예는 사용자 위치의 경도와 위도를 반환하는 간단한 지리적 위치 예입니다.

예

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<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 매개변수에 지정된 함수에 좌표 객체를 반환합니다.

  • showPosition() 함수는 획득하여 표시합니다. 경도 및 위도

위의 예는 오류 처리가 없는 매우 기본적인 위치정보 스크립트입니다.

오류 및 거부 처리

getCurrentPosition() 메서드의 두 번째 매개변수는 오류를 처리하는 데 사용됩니다. 사용자 위치 획득 실패 시 실행할 함수를 지정합니다:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
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>

Run Instance»

클릭 온라인 인스턴스를 보려면 "인스턴스 실행" 버튼

오류 코드:

  • 권한이 거부됨 - 사용자가 위치 정보를 찾을 수 없습니다.

  • 위치 없음 - 현재 위치를 얻을 수 없음

  • Timeout - 작업 시간 초과

결과를 map

as 지도에 결과를 표시하려면 Google Maps나 Baidu Maps와 같이 위도와 경도를 사용할 수 있는 지도 서비스에 액세스해야 합니다.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<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 지도에 위치를 표시합니다(정적 이미지 사용).

Google 지도 스크립트
위 링크는 스크립트를 사용하여 마커, 확대/축소 및 드래그 옵션이 포함된 대화형 지도를 표시하는 방법을 보여줍니다.

특정 위치에 대한 정보

이 페이지에서는 지도에 사용자 위치를 표시하는 방법을 보여줍니다. 그러나 지리적 위치는 특정 위치에 대한 정보를 얻는 데에도 유용합니다.

예:

  • 지역 정보 업데이트

  • 사용자 주변 관심 장소 표시

  • 대화형 자동차 내비게이션 시스템(GPS)

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

T성공하면 getCurrentPosition() 메서드가 객체를 반환합니다. . 위도, 경도 및 정확도 속성은 항상 반환됩니다. 사용 가능한 경우 다른 다음 속성이 반환됩니다.

属性描述
coords.latitude十进制数的纬度
coords.longitude十进制数的经度
coords.accuracy位置精度
coords.altitude海拔，海平面以上以米计
coords.altitudeAccuracy位置的海拔精度
coords.heading方向，从正北开始以度计
coords.speed速度，以米/每秒计
timestamp响应的日期/时间

Geolocation 개체 - 기타 흥미로운 방법

watchPosition() - 사용자의 현재 위치를 반환하고 사용자가 이동할 때 업데이트된 위치를 계속 반환합니다(예: GPS 차에서).

clearWatch() - watchPosition() 메서드를 중지합니다.

다음 예에서는 watchPosition() 메서드를 보여줍니다. 이 예제를 테스트하려면 정확한 GPS 장치(예: iPhone)가 필요합니다.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<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>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요