최신 웹 개발 튜토리얼

HTML5의 위치 정보


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


W3C 위치 정보 API는 무엇입니까?

W3C의 위치 정보 API는 클라이언트 측 장치의 지리적 위치 정보를 검색 할 수있는 인터페이스를 표준화 할 수있는 월드 와이드 웹 컨소시엄 (W3C)에 의해 노력입니다.

그것은 클라이언트 응용 프로그램에서 실행하는 응용 프로그램 프로그래밍 인터페이스 (API)에 대한 투명 위치 정보 서버의 컨설팅을 통해 고객의 장치 위치를주는 것으로, 객체, ECMAScript를 표준 규격의 집합을 정의합니다.

위치 정보의 가장 일반적인 소스 IP 주소, Wi-Fi 및 블루투스 MAC 주소, 무선 주파수 식별 (RFID), 무선 인터넷 접속 위치 또는 장치 글로벌 포지셔닝 시스템 (GPS) 및 GSM / CDMA 셀 아이디이다.

위치는 사용할 수있는 최고의 위치 정보 소스에 따라 주어진 정확도로 반환됩니다.


웹 브라우저에 배포

웹 브라우저를 구현하는 경우 웹 페이지에 직접 위치 정보 API를 사용할 수 있습니다. 역사적으로, 일부 브라우저는 구글 기어 플러그인을 통해 지원을 얻을 수 있지만, 이것은 2010 년에 중단되었다 그것은 의존 서버 측 API가 2012 년에 응답하지.

지구 위치 API 이상적 개인 휴대 정보 단말기 (PDA), 스마트 폰 등의 모바일 디바이스를위한 웹 애플리케이션에 적합하다. 데스크톱 컴퓨터에서 W3C 지리적 위치 API 버전 3.5 이후 파이어 폭스에서 작동, 구글 크롬, 오페라 10.6, 인터넷 익스플로러 9.0 및 모바일 기기에서 사파리 5, 그것은 안드로이드 (펌웨어 2.0 이상), 아이폰 OS, 윈도우 폰과 마에 모에서 작동합니다.

2010년 11월 24일부터 안드로이드와 심비안 장치 (S60 세대 3 & 5)에 해당하는 - W3C의 지리적 위치 API는 오페라 모바일 10.1에 의해 지원됩니다.

구글 기어는 기본적으로 기어를 구현 기어 플러그인 같이 Internet Explorer 7.0 이상, 구글 크롬을 포함한 이전의 비 호환 브라우저에 대한 위치 정보 지원을 제공했다. 또한 Windows Mobile 용 안드로이드 브라우저 (이전 버전 2.0)와 오페라 모바일 플러그인과 같은 모바일 기기에서 위치 정보를 지원했다.

그러나, 구글 기어 위치 정보 API는 W3C 지리적 위치 API와 호환되지 않는 더 이상 지원되지 않습니다.


풍모

W3C 지오 로케이션 API의 결과는 일반적으로 모두가 위치 정보 제공자에 의존하는 위도와 경도 (좌표), 표고 (고도), 및 [위치 정밀도 정리]를 포함하여 4 개 위치 속성을 줄 것이다.

일부 쿼리에서는 고도 산출 또는 값을 반환하지 않을 수 있습니다.


사용자의 위치를 ​​찾습니다

html로 위치 정보 API는 사용자의 지리적 위치를 가져 오는 데 사용됩니다.

이 개인 정보를 손상시킬 수 있기 때문에 사용자가이를 승인하지 않는 한, 위치는 사용할 수 없습니다.


브라우저 지원

테이블의 숫자는 완벽하게 위치 정보를 지원하는 최초의 브라우저 버전을 지정합니다.

API
Geolocation 5.0 9.0 3.5 5.0 16.0

Note: 위치 정보가처럼, GPS와 장치에 대해 훨씬 더 정확 iPhone .


HTML의 위치 정보를 사용하여

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;
    }
}
»그것을 자신을 시도

지도에 결과를 표시

지도에 결과를 표시하려면, Google지도 같은지도 서비스에 대한 액세스가 필요합니다.

아래의 예에서 반환 된 위도와 경도는 구글지도에 위치를 표시하는 데 사용됩니다 (using a static image) :

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+"'>";
}
»그것을 자신을 시도

구글지도 스크립트
마커, 줌, 드래그 옵션을 사용하여 대화 형 구글지도를 표시하는 방법.


위치 별 정보

이 페이지는지도에 사용자의 위치를 ​​표시하는 방법을 보여 주었다.

지리적 위치는 같은 위치 별 정보에 매우 유용하다 :

  • 최신 지역 정보
  • 사용자 근처에 포인트-의 이익을보기
  • 턴 바이 턴 네비게이션 (GPS)

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

getCurrentPosition() 가 성공하면 방법은 개체를 반환합니다. 위도, 경도 및 정확성 속성은 항상 반환됩니다. 다른 특성은 가능한 경우 반환됩니다 :

재산 보고
coords.latitude 십진수로 위도
coords.longitude 십진수로 경도
coords.accuracy 위치의 정확도
coords.altitude 평균 해발 미터의 고도
coords.altitudeAccuracy 위치의 고도의 정확성
coords.heading 도 같은이 호 북쪽에서 시계 방향으로
coords.speed 초당 미터 속도
timestamp 응답의 날짜 / 시간

위치 정보 객체 - 기타 흥미로운 방법

watchPosition() - 사용자의 현재 위치를 반환하고, 사용자의 움직임에 따라 업데이트 된 위치를 반환하고 있습니다 (like the GPS in a car) .

clearWatch() - 정거장 watchPosition() 메소드를.

아래의 예는 쇼 watchPosition() 메소드. 이 테스트 정확한 GPS 장치를 필요 (like 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>
»그것을 자신을 시도