HTML5에서 HTML 위치정보를 올바르게 사용하는 방법은 무엇입니까?

HTML5가 개발자들에게 뜨거운 주제임에는 의심의 여지가 없습니다. HTML5 기능의 기본 원리를 빠르게 이해해야 하는 경우 이 문서에서는 주로 HTML5 위치정보에 대해 설명합니다.

HTML5 geolocation 사용

HTML5 Geolocation(지오로케이션)은 사용자의 위치를 ​​찾는 데 사용됩니다.

사용자 위치 찾기

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="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

예제 설명:

위치정보 지원 여부 감지

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

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

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

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

오류 및 거부 처리

getCurrentPosition() 메서드의 두 번째 매개변수는 오류를 처리하는 데 사용됩니다. 사용자 위치 검색에 실패할 때 실행할 기능을 지정합니다.

인스턴스도 있습니다:

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

오류 코드:

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

위치를 사용할 수 없음 - 현재 위치를 가져올 수 없습니다. 위치

Timeout - 작업 시간이 초과되었습니다

지도에 결과 표시

지도에 결과를 표시하려면 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; />";
}

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

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

특정 위치에 대한 정보

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

지역 정보 업데이트

사용자 주변 관심 지점 표시

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

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

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

속성 및 설명:

coords.latitude(십진수로 나타낸 위도)

coords.longitude(십진수로 나타낸 경도)

coords.accuracy(위치 정확도)

coords.altitude(고도, 위의 미터 단위) 해수면) 미터)

coords.altitudeAccuracy(위치의 고도 정확도)

coords.heading(방향, 진북의 각도)

coords.speed(속도, 초당 미터)

timestamp(반응형 날짜/ Time)

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="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script

[관련 권장 사항]

HTML 및 HTML5의 개발 역사

기본 요소 html, 처음부터 HTML을 배우자

위 내용은 HTML5에서 HTML 위치정보를 올바르게 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!