html5_html5 튜토리얼 기술의 지리적 위치 측위 API 인터페이스 개발 및 적용 요약-H5 튜토리얼-php.cn

html5_html5 튜토리얼 기술의 지리적 위치 측위 API 인터페이스 개발 및 적용 요약

WBOY

풀어 주다： 2016-05-16 15:50:40

원래의

1379명이 탐색했습니다.

여러 가지 위치 정보 확인 방법: IP 주소, GPS, Wi-Fi, GSM/CDMA

위치 정보 획득 프로세스 :
사용자가 위치 정보를 획득하는 데 필요한 웹 애플리케이션을 엽니다.
2. 애플리케이션이 브라우저에 지리적 위치를 요청하면 브라우저는 사용자에게 지리적 위치를 공유할지 묻는 쿼리를 표시합니다.
3. 사용자가 허용한다고 가정하면 브라우저는 기기에서 관련 정보를 쿼리합니다.
4. 브라우저는 신뢰할 수 있는 위치 서버에 관련 정보를 보내고 서버는 특정 지리적 위치를 반환합니다.

HTML5 지리적 위치 구현:
1. 사용자의 지리적 위치를 얻기 위한 브라우저 기반(백엔드 지원 없음) 기술 구현
2. 지리적 위치(정확도는 기기에 따라 최대 10m)
3. 사용자의 지리적 위치를 지속적으로 추적합니다.
4. Google 지도 또는 Baidu 지도와 상호작용하여 위치 정보를 제공합니다.

Geolocation API 사용자를 연결하는 데 사용됩니다. 현재 지리적 위치 정보는 사용자 개인 정보 보호 및 보안 문제와 관련된 신뢰할 수 있는 사이트와 공유됩니다. 따라서 사이트에서 사용자의 현재 지리적 위치를 가져와야 하는 경우 브라우저는 사용자에게 "허용" 또는 "" 메시지를 표시합니다. 부인하다".
먼저 어떤 브라우저가 Geolocation API를 지원하는지 확인하세요.
IE9.0, FF3.5, Safari5.0, Chrome5.0, Opera10.6, IPhone3.0, Android2.0
Navigator에 Geolocation API가 있습니다. 객체에는 3가지 메소드만 포함됩니다:

코드 복사

코드는 다음과 같습니다:

1. getCurrentPosition //현재 위치
2. watchPosition //위치 모니터링
3.clearWatch //모니터링 지우기
navigator.geolocation.getCurrentPosition( …, function(error){
switch(error . code){
case error.TIMEOUT :
alert( " 연결 시간이 초과되었습니다. 다시 시도해 주세요." )
break
case error.PERMISSION_DENIED :
alert( " 거부했습니다. 위치 공유 서비스 사용, 쿼리가 취소되었습니다." );
break;
case error.POSITION_UNAVAILABLE :
alert( ", 죄송합니다. 해당 행성에서 위치 서비스를 일시적으로 사용할 수 없습니다." );
break;
}
});

watchPosition은 ClearWatch와 결합된 트래커와 같습니다.
watchPosition과clearWatch는 setInterval 및clearInterval과 약간 유사하게 작동합니다.
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );

HTML 5는 지리적 위치와 같은 일련의 API를 제공합니다. 사용자는 LBS 지리 애플리케이션을 만드는 것이 편리합니다. 먼저 HTML 5를 지원하는 브라우저에서는 API가 활성화되면 사용자에게 API 사용에 동의하는지 묻는 메시지가 표시됩니다. 그렇지 않으면 활성화되지 않습니다. 안전을 보장하기 위해.
1. 브라우저가 LBS API를 지원하는지 확인하려면 켜세요

코드 복사

코드는 다음과 같습니다.

function isGeolocationAPIAvailable()
{
var location = "아니요, 이 브라우저에서는 위치정보를 지원하지 않습니다."
if (window.navigator. geolocation) {
location = "예, 이 브라우저는 Geolocation을 지원합니다."
alert(location)
}

위의 예에서는 여전히 displayError가 있습니다.

2. 사용자의 지리적 위치를 가져옵니다. getCurrentPosition을 사용하세요.

코드 복사코드는 다음과 같습니다.

function requestPosition() {

if (nav == null) {
nav = window.navigator; }
if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
geoloc.getCurrentPosition(successCallback) ;
}
else {
alert("Geolocation API는 해당 브라우저에서 지원되지 않습니다.")
}
}
else {
alert("Navigator를 찾을 수 없습니다. ");
}
}

지리적 위치를 성공적으로 가져오면 반환된 결과를 처리하기 위한 콜백 메서드가 생성됩니다.

코드 복사코드는 다음과 같습니다.

function setLocation(val, e) {

document.getElementById(e ).value = val;
}
function SuccessCallback(position)
{
setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude") ;
}

3. 사용자의 지리적 위치 변경을 추적하는 방법은 다음과 같습니다.
1 watchPosition 예제는 다음과 같습니다.

코드 복사코드는 다음과 같습니다.

그런 다음 성공 콜백에서 표시할 최신 지리적 위치를 설정할 수 있습니다.

코드 복사

코드

function SuccessCallback(position){
setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude"); >}

실시간 추적을 원하지 않으면 취소할 수 있습니다.
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID)
}

4. 예외 처리 방법 예외가 발생하면 이를 포착할 수 있습니다.

코드 복사코드는 다음과 같습니다.

if (geoloc != null) {
geoloc.getCurrentPosition(successCallback, errorCallback)
}
function errorCallback(error) {
var message = "";
switch (error.code) {
case error.PERMISSION_DENIED:
message = "이 웹사이트에는 다음 작업에 대한 권한이 없습니다. "
"Geolocation API"를 사용하세요.
break;
case error.POSITION_UNAVAILABLE:
message = "현재 위치를 확인할 수 없습니다.";
break;
case error .PERMISSION_DENIED_TIMEOUT:
message = "지정된 제한 시간 내에 현재 위치를 확인할 수 없습니다"
".";
break;
}
if (message == "") {
var strErrorCode = error.code.toString();
message = " 알 수 없는 오류(코드: " strErrorCode ")로 인해 "
"위치를 확인할 수 없습니다.";
alert(message);
}

5. Google 지도에 위치 표시(Google Map API 및 기타 설정이 설정된 경우)

코드 복사코드는 다음과 같습니다.

function getCurrentLocation()

{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showMyPosition,showError );
}
else
{
alert("아니요, Geolocation API는 다음과 같습니다. 이 브라우저에서는 지원되지 않습니다.");
}
}
function showMyPosition(position)
{
varordinates=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="

";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("이 웹사이트는 Geolocation API를 사용할 권한이 없습니다.")
break;
case error.POSITION_UNAVAILABLE:
alert("현재 위치를 사용할 수 없습니다. 결정됨.")
break;
case error.TIMEOUT:
alert("현재 위치를 결정할 수 없습니다.") 지정된 시간 초과 기간 내에 위치를 결정할 수 없습니다.")
break;
case error.UNKNOWN_ERROR:
alert("알 수 없는 오류로 인해 위치를 확인할 수 없습니다.")
break
}
}