html5 가이드-4. Geolocation을 사용하여 위치 지정 기능 구현_html5 튜토리얼 기술
- WBOY원래의
- 2016-05-16 15:50:181466검색
오늘 배울 내용은 Geolocation을 활용하여 위치 확인 기능을 구현하는 것입니다. 다음 메소드를 제공하는 navigator.geolocation을 통해 Geolocation 객체를 얻을 수 있습니다.
getCurrentPosition(callback,errorCallback,options): 현재 위치를 가져옵니다.
watchPosition(callback,error,options): 현재 모니터링을 시작합니다. position;
clearWatch(id): 현재 위치 모니터링을 중지합니다.
참고: 아래 예시에 사용된 브라우저는 크롬입니다. 다른 브라우저를 사용하는 경우 실행 결과가 예시에 표시된 결과와 일치한다고 보장할 수 없습니다.
1. 현재 위치 가져오기
현재 위치를 가져오기 위해 getCurrentPosition 메서드를 사용합니다. 위치 정보는 결과 형식으로 직접 반환되지 않습니다. 처리를 위한 콜백 함수. 좌표를 가져오는 데 약간의 지연이 있을 수 있으며, 액세스 권한을 묻는 메시지가 표시됩니다. 다음 예를 살펴보겠습니다.
코드 복사
코드는 다음과 같습니다.< !DOCTYPE HTML>
<제목>예 Collapse;}
번째, td{패딩: 4px;}
번째{text-align: right;}
< ;table border="1">
<일>경도: /td>
<일>위도:
>
<일> 타임스탬프:
<script> <br>navigator.geolocation.getCurrentPosition(displayPosition); <br>function displayPosition(pos) { <br>var Properties = ['경도', '위도', '고도', '정확도', 'altitudeAccuracy ', 'heading', 'speed']; <br>for (var i = 0, len = Properties.length; i var value = pos.coords[properties[i]] ; <br> document.getElementById(properties[i]).innerHTML = value; <br>} <br>document.getElementById('timestamp').innerHTML = <br>} <br></ script> <br></body> <br></html> <br><br><br>반환된 위치 객체에는 좌표 정보인 타임스탬프가 포함됩니다. 획득되었습니다. 그 중 좌표에는 다음 속성이 포함됩니다: 위도: 위도, 높이, 정확도: 고도 정확도(미터), 이동 속도(미터) 두번째) . <br>브라우저를 호스팅하는 기기에 따라 모든 정보가 반환되지는 않습니다. GPS, 가속도계, 나침반이 장착된 모바일 장치는 대부분의 정보를 반환하지만 가정용 컴퓨터는 그렇지 않습니다. 가정용 컴퓨터에서 얻는 위치정보는 네트워크 환경이나 Wi-Fi에 따라 다릅니다. 위 예제의 결과를 살펴보겠습니다. <br> <br><br><br> <br>좌표 정보를 얻으려면 허용을 클릭하세요. <br> <br><br><br> <br>2. 예외 처리 <br> <br>errorCallback 콜백 함수를 사용하여 구현한 getCurrentPosition의 예외 처리를 소개합니다. 함수에 의해 반환된 매개변수 error에는 두 가지 속성이 포함되어 있습니다. code: 오류 유형 코드, message: 오류 메시지. 코드에는 세 가지 값이 포함되어 있습니다. 1: 사용자에게 지리적 위치를 사용할 권한이 없습니다. 2: 좌표 정보를 얻을 수 없습니다. 3: 정보를 얻는 데 시간이 초과되었습니다. </div>아래 예시를 살펴보겠습니다. <br><br><br><p><img alt="" src="http://files.jb51.net/file_images/article/201301/201301071613068.png"></p>코드 복사<br><br><p>코드는 다음과 같습니다.<img alt="" src="http://files.jb51.net/file_images/article/201301/201301071613069.png"></p> <div class="msgborder" id="phpcode123"> <br><!DOCTYPE HTML> <br><html> <br><머리> <br><제목>예</제목> <br><스타일> <br>테이블{테두리 축소: 접기;} <br>번째, td{패딩: 4px;} <br>번째{텍스트-정렬: 오른쪽;} <br></style> <br></head> <br><본문> <br><table border="1"> <br><tr> <br><일>경도:</일> <br><td id="longitude">-</td> <br><일>위도:</일> <br><td id="latitude">-</td> <br></tr> <br><tr> <br><일>고도:</일> <br><td id="altitude">-</td> <br>번째>정확도: <br><td id="accuracy">-</td> <br></tr> <br><tr> <br>번째>고도 정확도: <br><td id="altitudeAccuracy">-</td> <br><일>제목:</일> <br><td id="heading">-</td> <br></tr> <br><tr> <br><번째>속도:</th> <br><td id="speed">-</td> <br><일>타임 스탬프:</일> <br><td id="timestamp">-</td> <br></tr> <br><tr> <br><일>오류 코드:</일> <br><td id="errcode">-</td> <br><일>오류 메시지:</일> <br><td id="errmessage">-</td> <br></tr> <br></테이블> <br><스크립트> <br>navigator.geolocation.getCurrentPosition(displayPosition, handlerError); <br>function displayPosition(pos) { <br>var 속성 = ["경도", "위도", "고도", "정확도", "altitudeAccuracy", "방향", "속도"]; <br>for (var i = 0; i < Properties.length; i ) { <br />var value = pos.coords[properties[i]]; <br />document.getElementById(properties[i]).innerHTML = 값; <br />} <br />document.getElementById("timestamp").innerHTML = pos.timestamp; <br />} <br />function handlerError(err) { <br />document.getElementById("errcode").innerHTML = err.code; <br />document.getElementById("errmessage").innerHTML = err.message; <br />} <br /></script>