html5 가이드-4. Geolocation을 사용하여 위치 지정 기능 구현_html5 튜토리얼 기술

WBOY
풀어 주다: 2016-05-16 15:50:18
원래의
1521명이 탐색했습니다.

오늘 배울 내용은 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>



拒绝授权,运行结果:

3.使usegeolocation可选参数项
getCurrentPosition(callback,errorCallback,options)중 옵션이 없습니다.时间(毫秒); maximumAge: 指定缓存时间(毫秒)。我们来下下face的例子:

复主代码
代码如下:



<머리>
<제목>예
<스타일>
테이블{테두리 축소: 접기;}
번째, td{패딩: 4px;}
번째{텍스트-정렬: 오른쪽;}


<본문>


<일>경도:

<일>위도:



<일>고도:

번째>정확도:



번째>고도 정확도:

<일>제목:



<번째>속도:

<일>타임 스탬프:



<일>오류 코드:

<일>오류 메시지:



<스크립트>
var options = {
enableHighAccuracy: false,
timeout: 2000,
maximumAge: 30000
};
navigator.geolocation.getCurrentPosition(displayPosition, handlerError, options);
function displayPosition(pos) {
var 속성 = ["경도", "위도", "고도", "정확도", "altitudeAccuracy", "방향", "속도"];
for (var i = 0; i < Properties.length; i ) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = 값;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handlerError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}




4.监视位置变化
아래에서 WatchPosition을 사용하는 방법은 다음과 같습니다. 우리는 们来看例子:

复主代码
代码如下:



<머리>
<제목>예
<스타일>
테이블{테두리 축소: 접기;}
번째, td{패딩: 4px;}
번째{텍스트-정렬: 오른쪽;}


<본문>
- -
- -
- -
- -
- -


<일>경도:

<일>위도:



<일>고도:

번째>정확도:



번째>고도 정확도:

<일>제목:



<번째>속도:

<일>타임 스탬프:



<일>오류 코드:

<일>오류 메시지:




<스크립트>
var options = {
enableHighAccuracy: false,
timeout: 2000,
maximumAge: 30000
};
var watchID = navigator.geolocation.watchPosition(displayPosition, handlerError, options);
document.getElementById("pressme").onclick = function (e) {
navigator.geolocation.clearWatch(watchID);
};
function displayPosition(pos) {
var 속성 = ["경도", "위도", "고도", "정확도", "altitudeAccuracy", "방향", "속도"];
for (var i = 0; i < Properties.length; i ) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = 값;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handlerError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}




当点击시계 취소按钮时,停止监视。
demo下载地址:Html5Guide.Geolocation.zip
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
- -
- -
- -
- -
- -