지리적 위치를 찾는 몇 가지 방법 : IP 주소, GPS, WiFi, GSM/CDMA
지리적 위치 획득 프로세스 :1. 사용자는 지리적 위치를 얻는 데 필요한 웹 응용 프로그램을 엽니 다.
2. 응용 프로그램은 브라우저를 지리적 위치로 요청하고 브라우저는 쿼리를 팝업하여 사용자가 지리적 위치를 공유하고 있는지 묻습니다.
3. 사용자가 허용한다고 가정하면 브라우저는 설정에서 관련 정보를 쿼리합니다.
4. 브라우저는 관련 정보를 신뢰할 수있는 위치 서버로 보내고 서버는 특정 지리적 위치로 돌아옵니다.
HTML5 지리적 상태 구현 :1. 브라우저를 기반으로 사용자를 얻는 기술 구현 (백엔드 지원 없음)
2. 사용자의 지리적 위치를 정확하게 찾으십시오 (정확도는 장비에 따라 최대 10m입니다)
3. 사용자의 지리적 위치를 지속적으로 추적합니다
4. 대화식으로 위치 정보를 Google지도 또는 Baidu지도와 함께 제공합니다.
Geolocation API는 사용자의 개인 정보 및 보안 문제가 포함 된 신뢰할 수있는 사이트와 사용자의 현재 지리적 위치 정보를 공유하는 데 사용됩니다. 따라서 사이트가 사용자의 현재 지리적 위치를 얻어야 할 때 브라우저는 사용자에게 허용하거나 거부하도록 프롬프트합니다.
먼저 지리적 위치 API를 지원하는 브라우저를 살펴 보겠습니다.
IE9.0+, FF3.5+, Safari5.0+, Chrome5.0+, Opera10.6+, iPhone3.0+, android2.0+
Geolocation API는 네비게이터 객체에 존재하며 3 가지 방법 만 포함합니다.
1. GetCurrentPosition // 현재 위치
2. WatchPosition // 모니터링 위치
3. ClearWatch // Clear Monitoring
navigator.geolocation.getCurrentPosition (…, function (error) {
스위치 (error.code) {
케이스 오류. 타임 아웃 :
ALERT ( "연결 시간 출력, 다시 시도하십시오");
부서지다;
case error.permission_denied :
ALERT ( "위치 공유 서비스 사용을 거부했습니다. 쿼리가 취소되었습니다");
부서지다;
case error.position_unavailable :
경고 ( ", 죄송합니다. 당분간 지구에 위치 서비스를 제공 할 수 없습니다");
부서지다;
}
});
시계는 ClearWatch와 짝을 이루는 추적기와 같습니다.
WatchPosition은 SetInterval 및 Clearinterval 작동 방식과 비슷합니다.
var watchPositionId = navigator.geolocation.WatchPosition (success_callback, error_callback, 옵션);
navigator.geolocation.clearWatch (WatchPositionId);
HTML 5는 사용자가 사용할 수있는 지리적 위치와 같은 일련의 API를 제공하여 사용자가 LBS 지리적 응용 프로그램을 생성 할 수 있도록합니다. 먼저, HTML 5를 지원하는 브라우저에서 API를 열 때 사용자가 API를 사용하기로 동의하는지 여부를 묻습니다. 그렇지 않으면 보안을 보장합니다.
1. 브라우저가 LBS API를 지원하는지 여부를 결정하려면 켜기함수 isgeolocationApiAvailable ()
{
var location = "아니오, 지리적 위치는이 브라우저에서 지원되지 않습니다.";
if (window.navigator.geolocation) {
위치 = "예, 지리적 위치는이 브라우저에서 지원됩니다.";
}
경고 (위치);
}
위의 예에서, 예외는 DisplayError 메소드에서도 잡혔습니다.
2. 사용자의 지리적 위치를 얻으십시오이것은 getCurrentPosition을 사용하여 수행됩니다.
함수 요청 위치 () {
if (nav == null) {
nav = window.navigator;
}
if (nav! = null) {
var geoloc = nav.geolocation;
if (geoloc! = null) {
geoloc.getCurrentPosition (SuccessCallback);
}
또 다른 {
ALERT ( "Geolocation API는 브라우저에서 지원되지 않습니다");
}
}
또 다른 {
Alert ( "네비게이터는 찾을 수 없음");
}
}
지리적 위치가 성공적으로 얻어지면 반환 된 결과를 처리하기 위해 콜백 메소드가 생성됩니다.
함수 setLocation (val, e) {
document.getElementById (e) .Value = val;
}
기능 성공 CALLBACK (위치)
{
setLocation (position.coords.latitude, "latitude"); setLocation (position.coords.longitude, "경도");
}
3. 매우 일반적인 질문은 사용자의 변화하는 지리적 위치를 추적하는 방법입니다. 여기서 우리는 사용 된 두 개의 API를 요약합니다.1 시계
예는 다음과 같습니다.
function listenforPositionUpdates () {
if (nav == null) {
nav = window.navigator;
}
if (nav! = null) {
var geoloc = nav.geolocation;
if (geoloc! = null) {
watchId = geoloc.WatchPosition (성공 CALLBACK);
} 또 다른 {
ALERT ( "Geolocation API는 브라우저에서 지원되지 않습니다");
}
} 또 다른 {
Alert ( "네비게이터는 찾을 수 없음");
}
}
그런 다음 SuccessCallback에서 최신 지리적 위치를 표시 할 수 있습니다.
함수 successcallback (위치) {
setText (position.coords.latitude, "latitude"); setText (position.coords.longitude, "경도");
}
실시간 추적을 원하지 않으면 취소 할 수 있습니다.
함수 clearwatch (watchId) {
Window.navigator.geolocation.clearWatch (WatchId);
}
4. 예외를 다루는 방법예외가 발생하면 잡을 수 있습니다.
if (geoloc! = null) {
geoloc.getCurrentPosition (SuccessCallback, ErrorCallback);
}
함수 errorcallback (오류) {
var message = "";
스위치 (error.code) {
case error.permission_denied :
Message = "이 웹 사이트는 사용할 권한이 없습니다"
+ "지리적 위치 API";
부서지다;
case error.position_unavailable :
메시지 = "현재 위치를 결정할 수 없었습니다.";
부서지다;
case error.permission_denied_timeout :
Message = "현재 위치를 결정할 수 없습니다"
+ "지정된 시간 초과 기간 내에.";
부서지다;
}
if (message == "") {
var strerrorCode = error.code.toString ();
메시지 = "위치는 결정할 수 없습니다."
+ "알 수없는 오류 (코드 :" + strerrorCode + ");";
}
경고 (메시지);
}
5. Google지도에 위치를 표시합니다 (Google지도 API가 설정된 경우)함수 getCurrentLocation ()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (showmyposition, 샤워러);
}
또 다른
{
ALERT ( "아니요, GEOLOCATE API는이 브라우저에서 지원되지 않습니다.");
}
}
함수 쇼 마패가 (위치)
{
var coordinates = position.coords.latitude+","+position.coords.longitude;
var map_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+좌표+"& Zoom = 14 & size = 300x300 & sensor = false";
document.getElementById ( "googlemap"). innerHtml = "<img src = '"+map_url+" />";
}
기능 샤워러 (오류)
{
스위치 (error.code)
{
case error.permission_denied :
ALERT ( "이 웹 사이트는 지리적 위치 API를 사용할 수있는 권한이 없습니다")
부서지다;
case error.position_unavailable :
경고 ( "현재 위치는 결정될 수 없습니다.")
부서지다;
케이스 오류. 타임 아웃 :
경고 ( "현재 위치는 지정된 시간 내에 결정할 수 없습니다.")
부서지다;
case error.unknown_error :
경고 ( "알 수없는 오류로 인해 위치를 결정할 수 없습니다.")
부서지다;
}
}