HTML5 Geolocation API의 올바른 사용

Geolocation은 HTML5 표준에 따른 웹 API로, 기기의 현재 위치 정보(좌표)를 얻을 수 있습니다. 이 API에는 getCurrentPosition, watchPosition 및clearWatch 메서드가 있습니다. 나머지 두 가지 방법은 함께 사용해야 합니다!

브라우저 호환성 확인:

API는 navigator.geolocation 객체를 통해 게시됩니다. 이 객체가 존재하는 경우에만 해당 위치 정보 서비스를 사용할 수 있습니다.

 if (navigator.geolocation) { // 위치 코드는 여기에 작성됩니다.} else { Alert('현재 브라우저에서는 위치정보가 지원되지 않습니다.')}

사용자의 현재 위치를 가져옵니다.

사용자의 위치 정보를 얻으려면 getCurrentLocation 메소드를 사용하십시오. 이 메소드에는 세 가지 매개변수가 있습니다.

 // 초기화 매개변수 const options = { // 높은 정확도: true / false enableHighAccuracy: true, // 응답을 기다리는 최대 시간 단위: 밀리초 timeout: 5 * 1000, // 애플리케이션이 허용할 수 있는 가장 긴 캐시 위치 시간 maximumAge: 0}// 성공 콜백 함수: 데이터에 위치 정보가 포함됨 const handlerSuccess = data => console.log(data)// 실패 콜백 함수: error에 오류 정보가 포함됨 const handlerError = error => console.log(error)if (navigator.geolocation) { // 위치 지정 코드는 여기에 작성됩니다 navigator.geolocation.getCurrentPosition(handleSuccess, handlerError, options)} else { Alert('Geolocation은 브라우저에서 지원되지 않습니다.') }

자세한 내용이 포함된 코드는 다음과 같습니다.

 const handlerSuccess = data => { const { coords, // 위치 정보 타임스탬프 // 위치 정보 획득 성공 시 타임스탬프} = data const { 정확도, // 반환된 결과의 정확도(미터) 고도, // 수평 기준 plane Altitude 고도 정확도, // 고도 정확도(미터)를 반환합니다. 방향, // 호스트 장치의 이동 방향, 북위에서 시계 방향, // 위도 경도, // 경도 속도 // 기기의 이동 속도} = coords // 출력하여 확인하세요 console.log('timestamp =', timestamp) console.log('accuracy =', Accuracy) console.log('altitude =', 고도) console .log('altitudeAccuracy =', 고도정확도) console.log('heading =',heading) console.log('latitude =', latitude) console.log('longitude =', 경도) console.log('speed =', speed)}const handlerError = error => { switch (error.code) { 사례 1: console.log('위치 서비스 요청 거부됨') break 사례 2: console.log(' 일시적으로 위치 정보를 얻을 수 없습니다.') 중단 사례 3: console.log('정보 취득 시간 초과') 중단 사례 4: console.log('알 수 없는 오류') break }}const opt ​​​​= { // 높은 정확도: 참 / 거짓 활성화HighAccuracy: 참, // 응답을 기다리는 최대 시간 단위: 밀리초 timeout: 5 * 1000, // 애플리케이션이 허용할 캐시 위치의 최대 수명 maximumAge: 0} if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handleSuccess , handlerError, opt) } else { Alert('사용자의 브라우저에서는 위치정보가 지원되지 않습니다.')}

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.