HTML5 위치정보 예시 설명

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

사용자 위치 찾기

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

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

브라우저 지원

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

참고: iPhone과 같은 GPS 장치를 사용하는 경우 위치정보가 필요합니다. , 더 정확한 위치 정보를 얻을 수 있습니다.

HTML5 - 지리적 위치 사용

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

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

예

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

예 분석:

다음 여부 감지 위치정보 지원

지원되는 경우 getCurrentPosition() 메서드를 실행하세요. 지원되지 않는 경우 사용자에게 메시지가 표시됩니다.

getCurrentPosition()이 성공적으로 실행되면 좌표 객체가 showPosition 매개변수에 지정된 함수로 반환됩니다.

showPosition() 함수는 경도와 위도를 가져와 표시합니다.

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

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;
    }
  }

오류 코드:

권한 거부됨 - 사용자의 위치정보 확인이 허용되지 않음

위치를 사용할 수 없음 - 현재 위치를 가져올 수 없음

시간 초과 - 작업 시간 초과

지도에 결과 표시

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

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=&#39;"+img_url+"&#39; alt="HTML5 위치정보 예시 설명" >";
}

위 예에서는 반환된 위도 및 경도 데이터를 사용하여 Google 지도에 위치를 표시합니다(정적 이미지 사용).

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

특정 위치에 대한 정보

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

예:

지역 정보 업데이트

사용자 주변 관심 지점 표시

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

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

T 성공하면 getCurrentPosition() 메소드가 객체를 반환합니다. 위도, 경도 및 정확도 속성은 항상 반환됩니다.

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

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

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

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

<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>

【관련 권장사항】

1. 특별 추천 : "php Programmer Toolbox" V0.1 버전 다운로드

2. 무료 h5 온라인 동영상 튜토리얼

3. php.cn 원본 html5 동영상 튜토리얼

위 내용은 HTML5 위치정보 예시 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!