HTML5 Javascript API 확장 2에 대한 공격 - 지리 정보 서비스 및 지리 위치 API Learning_html5 튜토리얼 기술
- WBOY원래의
- 2016-05-16 15:50:021680검색
현재 가장 대중적인 서비스 유형 중 하나는 위치 기반 서비스(LBS)입니다. 이러한 유형의 서비스는 기업이 특정 지점의 좌표(예: 사용자 위치)에 가까운 지역에서 서비스를 제공하기 위해 사용하는 정보입니다. 일반 지도 등 관련 서비스. HTML5에는 지리적 위치를 결정하고 공유하기 위해 새로운 지리적 위치 API가 추가되었습니다.
개인정보 보호정책
원격 웹 서버와 물리적 위치를 공유할 때 개인정보 보호가 우려됩니다. 따라서 Geolocation API에서는 웹 애플리케이션이 위치 정보에 액세스하기 전에 사용자에게 권한을 제공해야 합니다. 지리 위치 데이터를 요청하는 웹 페이지를 처음 방문하면 브라우저에 사용자 위치에 대한 액세스를 제공하는 알림 표시줄이 표시됩니다. 브라우저 프롬프트에 따라 관련 인증을 선택하세요.
사용자가 권한을 부여하지 않으면 웹 애플리케이션에 위치 정보가 제공되지 않습니다. 관련 API를 호출하면 성공 콜백이 트리거되지 않습니다.
브라우저 지원 확인
Geolocation API는 최신 버전의 주류 브라우저에서 지원되지만, 이전 브라우저와의 호환성을 위해서는 확인이 필요합니다. Geolocation API를 사용할 수 없는 경우 아래와 같이 window.navigator.geolocation이 null이 됩니다.
코드 복사
코드는 다음과 같습니다. function show_islocationenabled()
{
var str = "아니요, 위치정보는 지원되지 않습니다."
if (window.navigator.geolocation) {
str = "예, 위치정보가 지원됩니다.";
}
alert( str )
}
Geolocation API는 네비게이터 전역 개체: navigator.geolocation, 이 개체는 방문자의 브라우저 및 시스템에 대한 유용한 정보를 제공합니다. 지리적 위치 정보는 기지국, 웹 데이터베이스, GPS 등 다양한 수단을 통해 얻을 수 있습니다. 다양한 방법을 사용하여 얻은 위치 정보의 정확도도 다릅니다. 일반적으로 GPS를 통해 얻은 정확도가 가장 정확합니다(GPS는 모바일 플랫폼에서 가장 많이 사용되며, 네트워크 데이터는 기본적으로 PC 플랫폼에서 사용됩니다). 경우에 따라 일부 위치에서는 명확한 지리적 위치 판독값을 얻지 못하거나 데이터를 전혀 수신하지 못할 수도 있습니다.
현재 위치 찾기
navigator.geolocation의 getCurrentPosition() 메소드를 사용하여 사용자의 현재 위치를 가져옵니다. 이 메소드는 한 번만 위치 정보를 가져옵니다. 이 메서드가 스크립트에 의해 호출되면 메서드는 호스트 장치의 현재 위치를 가져오려고 비동기적으로 시도합니다.
코드 복사
코드는 다음과 같습니다.메서드 서명: getCurrentPosition(geolocationSuccessCallback ,[geolocationErrorCallback ,geolocationOptions]);
1. geolocationSuccessCallback: 현재 위치 획득 성공 후 콜백(필수)
2. geolocationErrorCallback 오류 발생 시 사용되는 콜백(선택)
3. geolocationOptions. Geography Position 옵션 (선택 사항)
위치 정보 처리
getCurrentPositon() 메소드는 현재 위치 획득에 성공한 후 위치 정보를 Position 객체에 저장한 후 이 객체를 매개 변수로 실행합니다. geolocationSuccessCallback 이 콜백입니다. 이 콜백 함수에서는 이 개체에 포함된 정보로 원하는 모든 작업을 수행할 수 있습니다.
Position 객체에는 타임스탬프와 좌표라는 두 가지 속성이 있습니다. timestamp 속성은 지리적 위치 데이터의 생성 시간을 나타내고, coords 속성은 지리적 위치 정보를 나타내며, 7가지 속성을 포함합니다:
코드 복사
코드는 다음과 같습니다: .coords.latitude: 추정 위도
. coords.longitude: 추정 경도
. 🎜>. coords.accuracy: all 제공된 경도 및 위도 추정치의 정확도(미터)
coords.altitudeAccuracy: 제공된 고도 추정치(미터)의 정확도
. 호스트 장치가 현재 움직이고 있으며, 진북을 기준으로 시계 방향으로 계산됩니다.
coords.speed: 장치의 현재 지상 속도(초당 미터 단위)
일반적으로 coords.latitude, coords.longitude 및 coords.accuracy 중 세 가지 속성이 보장되며 나머지는 null을 반환합니다. 이는 기기의 기능과 기기에서 사용하는 백엔드 위치 확인 서버에 따라 다릅니다. 또한 사용자의 이전 위치를 기반으로 방향 및 속도 속성을 계산할 수 있습니다.
오류 처리
getCurrentPositon() 메서드를 실행할 때 오류가 발생하면 이 메서드는 PositionError 개체를 geolocationErrorCallback 콜백에 전달합니다.
위치정보 옵션 설정
위치정보 옵션의 세 가지 속성을 설정할 수 있습니다.
코드 복사
코드는 다음과 같습니다.enableHighAccuracy: 기기가 높은 정확도를 지원하는 경우 이 옵션은 높은 정확도를 활성화할지 여부를 나타냅니다.
timeout: 쿼리 시간 초과
maximumAge: 캐시를 사용할 수 있는 캐시된 위치의 최대 시간입니다.
아래 전체 예를 살펴보세요.
코드 복사
코드는 다음과 같습니다. 다음: position:
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
x.innerHTML="이 브라우저는 위치정보를 지원하지 않습니다.";
}
}
function showPosition(position) {
var latlon= position.coords.latitude "," position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
latlon "&zoom=9&size=400x300&sensor =false";
document.getElementById("mapholder").innerHTML="
}
function showError(error) {
switch(error.code ) {
case error.PERMISSION_DENIED:
x.innerHTML="사용자가 위치정보 요청을 거부했습니다."
break
case error.POSITION_UNAVAILABLE:
x.innerHTML ="위치 정보를 사용할 수 없습니다."
break;
case error.TIMEOUT:
x.innerHTML="사용자 위치 가져오기 요청 시간이 초과되었습니다."
break; UNKNOWN_ERROR:
x.innerHTML="알 수 없는 오류가 발생했습니다."
break
}
}
/html>
이 예에서는 현재 기기의 지리적 위치를 가져와 Google 지도에 표시합니다. 물론 Baidu Map API의 정적 플레이트를 사용하여 이 예를 변환할 수 있습니다. Baidu Map API에 대해서는 나중에 Practical Reference의 링크를 참고하시기 바랍니다.
연속 위치 확인 활성화/취소
navigator.geolocation의 clearWatch() 메서드를 사용하여 진행 중인 watchPosition()을 종료합니다. 이 메서드는 하나의 매개변수 watchID만 사용합니다.
아래 예시를 보세요.
코드를 복사하세요
코드는 다음과 같습니다.
<머리>
Geolocation API 예: 위치 업데이트 수신
<본문>
<머리>
<본문>