보다 인기있는 서비스 유형을 LBS (Location-Based Service)라고합니다. 이 유형의 서비스는 기업이 특정 지점의 좌표 근처 (예 : 사용자가있는 위치와 같은) (예 : 공통지도 관련 서비스)를 사용하는 정보입니다. HTML5에서, 새로운 지리 위치 API를 추가하여 지리적 위치를 결정하고 공유 하였다.
프라이버시 진술원격 웹 서버와 물리적 위치를 공유 할 때 프라이버시는 우려입니다. 따라서 Geolocation API는 웹 응용 프로그램이 위치 정보에 액세스하기 전에 사용자에게 권한을 제공해야합니다. 지리적 위치 데이터를 요청하는 웹 페이지에 처음 액세스하면 브라우저에 사용자 위치에 대한 액세스 권한을 제공하라는 알림 표시 줄이 표시됩니다. 브라우저의 프롬프트를 따르고 관련 승인을 선택하십시오.
사용자가 권한을 부여하지 않으면 웹 응용 프로그램에 위치 정보가 제공되지 않습니다. 관련 API를 호출해도 성공적인 콜백이 트리거되지 않습니다.
브라우저 지원을 확인하십시오Geolocation API는 최신 버전의 주류 브라우저에서 지원되지만 오래된 브라우저와 호환 되려면 여전히 확인해야합니다. Geolocation API를 사용할 수없는 경우 Window.navigator.geolocation은 다음과 같이 null입니다.
함수 show_islocationenabled ()
{
var str = "아니오, 지리적 위치는 지원되지 않습니다.";
if (window.navigator.geolocation) {
str = "예, 지리적 위치가 지원됩니다.";
}
경고 (str);
}
Geolocation API는 Navigation Global Object의 새로운 속성을 기반으로합니다. Navigator.geolocation은 방문자의 브라우저 및 시스템에 대한 유용한 정보를 제공합니다. 지리적 위치 정보는 기지국, 웹 데이터베이스 또는 GP와 같은 여러 수단을 통해 얻을 수 있습니다. 다른 방법을 사용하여 얻은 지리적 지위 정보의 정확도도 다릅니다. 일반적으로 가장 정확한 것은 GPS를 통해 얻습니다 (대부분의 GPS는 모바일 플랫폼에서 사용되며 PC 플랫폼은 기본적으로 네트워크 데이터에 의존합니다). 우연히도 일부 위치에서는 명확한 지리적 위치 판독 값을 얻지 못하거나 데이터를받지 못할 수 있습니다.
현재 위치를 배치하십시오GetCurrentPosition () Navigation.geolocation 메소드를 사용하여 사용자의 현재 위치를 얻으십시오. 이 방법은 위치 정보 만 한 번만 가져옵니다. 스크립트에 의해 메소드가 호출되면,이 방법은 호스트 장치의 현재 위치를 비동기 방식으로 얻으려고 시도합니다.
방법 시그니처 : getCurrentPosition (geolocationsuccesscallback, [geolocationerRorcallback, geolocationoptions]);
1. geolocationsuccesscallback : 현재 위치가 성공한 후 콜백 받기 (필수)
2. geolocationerRorcallback. 오류가 발생할 때 사용되는 콜백 (선택 사항)
3. geolocationoptions. 지리적 위치 옵션 (선택 사항)
프로세스 위치 정보
getCurrentPositon () 메소드가 현재 위치를 성공적으로 얻은 후 위치 정보를 위치 개체에 저장 한 다음이 개체를 매개 변수로 사용하여 geolocationsuccessCallback의 콜백을 실행합니다. 이 콜백 함수에서는이 개체에 포함 된 정보를 임의로 처리 할 수 있습니다.
위치 객체에는 타임 스탬프와 코디의 두 가지 속성이 있습니다. 타임 스탬프 속성은 지리적 위치 데이터의 생성 시간을 나타내며 Cords 속성은 지리적 위치 정보를 나타내며 7 가지 속성을 포함합니다.
.coords.latitude : 위도를 추정하십시오
. 코디
.coords.altitude : 추정 높이
. Coards.Accuracy : 미터로 제공되는 경도 및 위도 추정의 정확도
.coords.altitudeaccuracy : 미터로 제공되는 높이 추정치의 정확도
. 좌표; 헤드링 : 현재 움직이는 호스트 장치의 각도 방향, 북쪽 방향에 비해 시계 방향으로 계산됩니다.
.coords.speed : 초당 미터 단위의 장치의 현재지면 속도
일반적으로 이러한 속성 중 세 가지가 보장됩니다 : coord.latitude, coords.longitude 및 cords.accuracy, 그리고 나머지는 null을 반환합니다. 이는 장치의 기능과 사용하는 백엔드 포지셔닝 서버에 따라 다릅니다. 또한, 제목 및 속도 속성은 사용자의 이전 위치에 따라 계산할 수 있습니다.
처리 오류getCurrentPositOn () 메소드를 실행할 때 오류가 발생하면 메소드는 geolocationErrorCallback 콜백에 위치 에러 객체를 전달합니다.
지리적 위치 옵션을 설정하십시오geolocationoptions의 세 가지 특성을 설정할 수 있습니다.
ENABLEHIGHACCURACY : 장치가 높은 정밀도를 지원하는 경우이 옵션은 높은 정밀도가 활성화되는지 여부를 나타냅니다.
시간 초과 : 쿼리 타임 아웃
최대 : 캐시가 위치한 최대 횟수는 캐시를 사용할 수 있습니다.
아래의 전체 예를 참조하십시오.
<! doctype html>
<html>
<body>
<p id = "demo"> 버튼을 클릭하여 위치를 얻으십시오 : </p>
<버튼 onclick = "getLocation ()"> 시도 </button>
<div id = "maholder"> </div>
<cript>
var x = document.getElementById ( "데모");
함수 getLocation () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition (showposition, 샤워러);
}
또 다른{
x.innerhtml = "이 브라우저에서는 지리적 위치가 지원되지 않습니다.";
}
}
함수 showposition (위치) {
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 ( "maholder"). innerhtml = "<img src = '"+img_url+"' />";
}
기능 샤워러 (오류) {
스위치 (error.code) {
case error.permission_denied :
x.innerhtml = "사용자는 지리 위치 요청을 거부했습니다."
부서지다;
case error.position_unavailable :
x.innerhtml = "위치 정보를 사용할 수 없습니다."
부서지다;
케이스 오류. 타임 아웃 :
x.innerhtml = "사용자 위치를 초과 할 수있는 요청."
부서지다;
case error.unknown_error :
x.innerhtml = "알 수없는 오류가 발생했습니다."
부서지다;
}
}
</스크립트>
</body>
</html>
이 예제는 현재 장치의 지리적 위치를 가져 와서 Google지도에 표시합니다. 물론 Baidu Maps API의 정적 그래프 버전을 사용 하여이 예제를 변환 할 수 있습니다. Baidu Map API의 경우 나중에 실제 참조의 링크를 참조하십시오.
켜기/연속 포지셔닝을 취소합니다사용자의 위치가 변경되었는지 확인하려면 WatchPosition () Navigation.geolocation을 사용하여 사용자의 위치를 정기적으로 폴링하십시오. 이 방법에는 세 가지 매개 변수가 있습니다.이 세 가지 매개 변수는 getCurrentPosition () 메소드, 성공적인 콜백, 실패한 콜백 및 위치 정보를 얻는 옵션과 동일합니다. 이 방법에는 반환 값 WAWNID가 있으며 연속 포지셔닝을 취소하는 데 사용됩니다.
ClearWatch () Navigation.Geolocation을 사용하여 진행중인 WatchEposition ()을 종료하여 하나의 매개 변수 WatchId 만 사용합니다.
다음 예를 참조하십시오.
<! doctype html>
<html>
<헤드>
<title> Geolocation API 예제 : 위치 업데이트 듣기 </title>
<meta http-equiv = "x-ua compatible"content = "ie = 9" />
<script type = "text/javaScript">
함수 setText (val, e) {
document.getElementById (e) .Value = val;
}
var nav = null;
var watch;
function listenforPositionUpdates () {
if (nav == null) {
nav = window.navigator;
}
if (nav! = null) {
var geoloc = nav.geolocation;
if (geoloc! = null) {
watchId = geoloc.WatchPosition (성공 CALLBACK);
}
또 다른 {
Alert ( "지원되지 않음");
}
}
또 다른 {
경고 ( "네비게이터를 찾을 수 없음");
}
}
함수 clearwatch (watchId) {
Window.navigator.geolocation.clearWatch (WatchId);
}
기능 성공 CALLBACK (위치)
{
setText (position.coords.latitude, "latitude");
setText (position.coords.longitude, "경도");
}
</스크립트>
</head>
<body>
<label for = "latitude"> latitude : < /label> <입력 id = "latitude" />
<label for = "경도"> 경도 : < /label> <입력 id = "경도" />
<입력 유형 = "버튼"value = "위도 및 경도보기"onclick = "listenforPositionUpdates ()" />
<입력 유형 = "버튼"value = "Clear Watch"onclick = "ClearWatch ()" />
</body>
</html>
실제 참조 :공식 문서 : http://www.w3schools.com/html5/html5_geolocation.asp
템플릿 걱정 : http://www.cuoxin.com/w3school/html5/
Microsoft 도움말 : http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
Baidu Map API : http://dev.baidu.com/wiki/static/index.htm