HTML5 안내서 -4. 지리적 위치를 사용하여 포지셔닝 기능을 구현하십시오

저자：Eve Cole 업데이트 시간：2025-04-02 19:00:04

오늘날 우리가 배우고 싶은 것은 지리적 위치를 사용하여 포지셔닝 기능을 구현하는 것입니다. 내비게이션을 통해 Geolocation 객체를 얻을 수 있습니다. Geolocation은 다음과 같은 방법을 제공합니다.

getCurrentPosition (콜백, ErrorCallback, 옵션) : 현재 위치를 가져옵니다.

WatchPosition (콜백, 오류, 옵션) : 현재 위치 모니터링을 시작합니다.

ClearWatch (ID) : 현재 위치 모니터링 중지.

참고 : 다음 예제에 사용 된 브라우저는 Chrome입니다. 다른 브라우저를 사용하면 실행중인 결과가 예제에 표시된 결과와 일치한다고 보장 할 수 없습니다.

1. 현재 위치를 얻으십시오

GetCurrentPosition 메소드를 사용하여 현재 위치를 얻습니다. 위치 정보는 결과 형태로 직접 반환되지 않습니다. 콜백 함수를 사용하여 처리해야합니다. 좌표를받는 데 약간의 지연이 있으며 액세스 권한을 요청합니다. 다음 예를 살펴 보겠습니다.

<! doctype html>

<html>

<헤드>

<스타일>

표 {Border-Collapse : Collapse;}

Th, td {패딩 : 4px;}

th {텍스트-정렬 : 오른쪽;}

</스타일>

</head>

<body>

<테이블>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</테이블>

<cript>

navigator.geolocation.getCurrentPosition (displayPosition);

기능 표시 (POS) {

var 속성 = [ '경도', '위도', '고도', '고도', '정확도', '고도', '제목', '속도'];

for (var i = 0, len = properties.length; i <len; i ++) {

var value = pos.coords [속성 [i]];

document.getElementById (속성 [i]). innerhtml = value;

}

document.getElementById ( 'timestamp'). innerHtml = pos.timestamp;

}

</스크립트>

</body>

</html>

반환 된 위치 객체에는 두 가지 속성이 포함되어 있습니다. 코디는 다음과 같습니다. 반환 좌표 정보; 타임 스탬프 : 좌표 정보를 얻는 시간. 그중에서도 코디는 다음 속성을 포함합니다. 위도 : 위도; 경도 : 경도; 고도 : 높이; 정확도 : 정확도 (미터); 고도 : 높이 정확도 (미터); 제목 : 여행 방향; 속도 : 이동 속도 (미터/초).

모든 정보가 반환되는 것은 아니며 브라우저를 호스팅하는 장치에 따라 다릅니다. GPS, 가속기 및 나침반과 같은 모바일 장치는 대부분의 정보를 반환하지만 홈 컴퓨터는 작동하지 않습니다. 가정용 컴퓨터에서 얻은 위치 정보는 네트워크 환경 또는 WiFi에 따라 다릅니다. 위의 예제의 실행 결과를 살펴 보겠습니다.

조정 정보를 얻으려면 허용을 클릭하십시오.

2. 예외를 처리합니다

이제 ErrorCallback 콜백 함수를 사용하여 구현되는 GetCurrentPosition의 예외 처리를 소개합니다. 함수에 의해 리턴 된 매개 변수 오류에는 두 가지 속성이 포함되어 있습니다. 코드 : 오류 유형의 코드; 메시지 : 오류 메시지. 코드에는 세 가지 값이 포함되어 있습니다. 1 : 사용자는 지리적 위치를 사용하도록 권한이 없습니다. 2 : 좌표 정보는 얻을 수 없습니다. 3 : 정보 시간 초과가 얻어집니다.

아래 예를 살펴 보겠습니다.

<! doctype html>

<html>

<헤드>

<스타일>

표 {Border-Collapse : Collapse;}

Th, td {패딩 : 4px;}

th {텍스트-정렬 : 오른쪽;}

</스타일>

</head>

<body>

<테이블>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</테이블>

<cript>

navigator.geolocation.getCurrentPosition (displayPosition, handleError);

기능 표시 (POS) {

var 속성 = [ "경도", "위도", "고도", "정확도", "고도", "제목", "속도"];

for (var i = 0; i <properties.length; i ++) {

var value = pos.coords [속성 [i]];

document.getElementById (속성 [i]). innerhtml = value;

}

document.getElementById ( "timestamp"). innerhtml = pos.timestamp;

}

함수 핸들러러 (err) {

document.getElementById ( "errcode"). innerHtml = err.code;

document.getElementById ( "errmessage"). innerhtml = err.message;

}

</스크립트>

</body>

</html>

승인이 거부되고 운영 결과 :

3. 지리적 위치 옵션 매개 변수 항목을 사용하십시오

getCurrentPosition (콜백, ErrorCallback, 옵션)의 옵션에는 사용할 수있는 매개 변수가 있습니다. 시간 초과 : 시간 초과 (밀리 초); 최대 : 캐시 시간 (밀리 초)을 지정하십시오. 다음 예를 살펴 보겠습니다.

<! doctype html>

<html>

<헤드>

<스타일>

표 {Border-Collapse : Collapse;}

Th, td {패딩 : 4px;}

th {텍스트-정렬 : 오른쪽;}

</스타일>

</head>

<body>

<테이블>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</테이블>

<cript>

var 옵션 = {

enablehighaccuracy : false,

타임 아웃 : 2000,

최대 : 30000

};

navigator.geolocation.getCurrentPosition (displayPosition, handleError, 옵션);

기능 표시 (POS) {

var 속성 = [ "경도", "위도", "고도", "정확도", "고도", "제목", "속도"];

for (var i = 0; i <properties.length; i ++) {

var value = pos.coords [속성 [i]];

document.getElementById (속성 [i]). innerhtml = value;

}

document.getElementById ( "timestamp"). innerhtml = pos.timestamp;

}

함수 핸들러러 (err) {

document.getElementById ( "errcode"). innerHtml = err.code;

document.getElementById ( "errmessage"). innerhtml = err.message;

}

</스크립트>

</body>

</html>

4. 위치 변경 모니터

아래에서는 위치 변경을 구현하기 위해 WatchPosition 방법의 사용을 소개합니다. 사용 방법은 getCurrentPosition과 동일합니다. 예를 살펴 보겠습니다.

<! doctype html>

<html>

<헤드>

<스타일>

표 {Border-Collapse : Collapse;}

Th, td {패딩 : 4px;}

th {텍스트-정렬 : 오른쪽;}

</스타일>

</head>

<body>

<테이블>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</테이블>

<cript>

var 옵션 = {

enablehighaccuracy : false,

타임 아웃 : 2000,

최대 : 30000

};

var watchId = navigator.geolocation.WatchPosition (DisplayPosition, HandleError, 옵션);

document.getElementById ( "pressme"). onclick = function (e) {

navigator.geolocation.clearWatch (WatchId);

};

기능 표시 (POS) {

var 속성 = [ "경도", "위도", "고도", "정확도", "고도", "제목", "속도"];

for (var i = 0; i <properties.length; i ++) {

var value = pos.coords [속성 [i]];

document.getElementById (속성 [i]). innerhtml = value;

}

document.getElementById ( "timestamp"). innerhtml = pos.timestamp;

}

함수 핸들러러 (err) {

document.getElementById ( "errcode"). innerHtml = err.code;

document.getElementById ( "errmessage"). innerhtml = err.message;

}

</스크립트>

</body>

</html>

취소 시계 버튼을 클릭하면 모니터링이 중지됩니다.

데모 다운로드 주소 : html5guide.geolocation.zip