HTML5-지리적 위치

HTML5 Geolocation API를 사용하면 즐겨 찾는 웹 사이트와 위치를 공유 할 수 있습니다. JavaScript는 위도와 경도를 캡처 할 수 있으며 백엔드 웹 서버로 전송 될 수 있으며 지역 비즈니스를 찾거나지도에 위치를 표시하는 것과 같은 멋진 위치 인식 작업을 수행 할 수 있습니다.

오늘날 대부분의 브라우저와 모바일 장치는 Geolocation API를 지원합니다. 지리적 위치 API는 전역 내비게이터 객체의 새 속성 (예 : 다음과 같이 생성 할 수있는 Geolocation 객체-

var geolocation = navigator.geolocation;

지리적 위치 개체는 위젯이 장치의 지리적 위치에 대한 정보를 검색 할 수 있도록하는 서비스 개체입니다.

지리적 위치 방법

지리적 위치 객체는 다음과 같은 방법을 제공합니다-

Sr. 아니. 방법 및 설명
1 getCurrentPosition ()

이 메서드는 사용자의 현재 지리적 위치를 검색합니다.

2 watchPosition ()

이 메서드는 장치의 현재 지리적 위치에 대한주기적인 업데이트를 검색합니다.

clearWatch ()

이 메서드는 진행중인 watchPosition 호출을 취소합니다.

다음은 위의 방법 중 하나를 사용하는 샘플 코드입니다.

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

여기서 showLocation 및 errorHandler는 다음 섹션에서 설명하는 실제 위치를 가져오고 오류가있는 경우 처리하는 데 사용되는 콜백 메서드입니다.

위치 속성

Geolocation 메서드 getCurrentPosition () 및 getPositionUsingMethodName ()은 위치 정보를 검색하는 콜백 메서드를 지정합니다. 이러한 메서드는 객체와 비동기 적으로 호출됩니다.Position 전체 위치 정보를 저장합니다.

그만큼 Position개체는 장치의 현재 지리적 위치를 지정합니다. 위치는 방향 및 속도에 대한 정보와 함께 지리적 좌표 집합으로 표현됩니다.

다음 표는 Position 객체의 속성을 설명합니다. 선택적 속성의 경우 시스템이 값을 제공 할 수없는 경우 속성 값은 null로 설정됩니다.

특성 유형 기술
좌표 사물 장치의 지리적 위치를 지정합니다. 위치는 방향 및 속도에 대한 정보와 함께 지리적 좌표 집합으로 표현됩니다.
coords.latitude 번호 위도 추정치를 십진 단위로 지정합니다. 값 범위는 [-90.00, +90.00]입니다.
coords.longitude 번호 경도 추정치를 십진 단위로 지정합니다. 값 범위는 [-180.00, +180.00]입니다.
coords.altitude 번호 [선택 사항] WGS 84 타원체 위의 고도 추정치를 미터 단위로 지정합니다.
coords.accuracy 번호 [선택 사항] 위도 및 경도 추정의 정확도를 미터 단위로 지정합니다.
coords.altitudeAccuracy 번호 [선택 사항] 고도 추정 정확도를 미터 단위로 지정합니다.
coords.heading 번호 [선택 사항] 진북을 기준으로 시계 방향으로 계수되는 장치의 현재 이동 방향을 지정합니다.
coords.speed 번호 [선택 사항] 장치의 현재 지상 속도를 초당 미터로 지정합니다.
타임 스탬프 데이트 위치 정보가 검색되고 Position 객체가 생성 된 시간을 지정합니다.

다음은 Position 객체를 사용하는 샘플 코드입니다. 여기서 showLocation 메서드는 콜백 메서드입니다.

function showLocation( position ) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   ...
}

오류 처리

지리적 위치는 복잡하며 오류를 포착하고 우아하게 처리하는 데 매우 많이 필요합니다.

geolocations 메소드 getCurrentPosition () 및 watchPosition ()은 다음을 제공하는 오류 핸들러 콜백 메소드를 사용합니다. PositionError목적. 이 객체는 다음 두 가지 속성을 가지고 있습니다-

특성 유형 기술
암호 번호 오류에 대한 숫자 코드를 포함합니다.
메시지 사람이 읽을 수있는 오류 설명을 포함합니다.

다음 표는 PositionError 객체에서 반환 될 수있는 오류 코드를 설명합니다.

암호 일정한 기술
0 알수없는 오류 알 수없는 오류로 인해 메서드가 장치의 위치를 ​​검색하지 못했습니다.
1 PERMISSION_DENIED 애플리케이션에 위치 서비스를 사용할 수있는 권한이 없기 때문에 메서드가 장치의 위치를 ​​검색하지 못했습니다.
2 POSITION_UNAVAILABLE 장치의 위치를 ​​확인할 수 없습니다.
시간 초과 메서드가 지정된 최대 시간 초과 간격 내에 위치 정보를 검색 할 수 없습니다.

다음은 PositionError 객체를 사용하는 샘플 코드입니다. 여기서 errorHandler 메서드는 콜백 메서드입니다.

function errorHandler( err ) {
   
   if (err.code == 1) {
      
      // access is denied
   }
   ...
}

포지션 옵션

다음은 getCurrentPosition () 메서드의 실제 구문입니다.

getCurrentPosition(callback, ErrorCallback, options)

여기에서 세 번째 인수는 PositionOptions 장치의 지리적 위치를 검색하기위한 옵션 세트를 지정하는 객체입니다.

다음은 세 번째 인수로 지정할 수있는 옵션입니다.

특성 유형 기술
enableHighAccuracy 부울 위젯이 가능한 가장 정확한 위치 추정치를 수신할지 여부를 지정합니다. 기본적으로 이것은 false입니다.
타임 아웃 번호 timeout 속성은 웹 응용 프로그램이 위치를 기꺼이 기다리는 시간 (밀리 초)입니다.
maximumAge 번호 캐시 된 위치 정보의 만료 시간 (밀리 초)을 지정합니다.

다음은 위에서 언급 한 방법을 사용하는 방법을 보여주는 샘플 코드입니다.

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}