HTML5는 지리적 위치 정보 획득 기능과 positioning_html5 튜토리얼 기술을 구현합니다.-H5 튜토리얼-php.cn

HTML5는 지리적 위치 정보 획득 기능과 positioning_html5 튜토리얼 기술을 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:46:46

원래의

1544명이 탐색했습니다.

HTML5는 사용자의 위치를 확인할 수 있는 위치정보 기능(Geolocation API)을 제공합니다. HTML5의 이 기능을 사용하여 위치정보를 기반으로 하는 애플리케이션을 개발할 수 있습니다. 이 문서에서는 예제를 사용하여 HTML5를 사용하고 Baidu 및 Google 지도 인터페이스를 사용하여 사용자의 정확한 지리적 위치 정보를 얻는 방법을 공유합니다.

소스 코드 다운로드: 다운로드하려면 여기를 클릭하세요

HTML5 위치정보 기능 사용 방법

위치정보는 HTML5의 새로운 기능이므로 HTML5를 지원하는 최신 브라우저, 특히 위치정보가 더 정확한 iPhone과 같은 휴대용 기기에서만 실행할 수 있습니다. 먼저 사용자 장치 브라우저가 지리적 위치를 지원하는지 여부를 감지하고, 지원하는 경우 지리 정보를 가져와야 합니다. 이 기능은 사용자의 개인 정보를 침해할 수 있습니다. 따라서 사용자의 위치 정보를 사용할 수 없으므로 애플리케이션에 액세스할 때 위치 정보를 허용할지 여부를 묻는 메시지가 표시됩니다. .

코드 복사

코드는 다음과 같습니다.

function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
Alert("브라우저는 위치정보를 지원하지 않습니다.")
}
}

위 코드는 사용자 기기가 위치정보를 지원하는 경우 getCurrentPosition() 메서드가 실행된다는 것을 알 수 있습니다. getCurrentPosition()이 성공적으로 실행되면 showPosition 매개변수에 지정된 함수로 좌표 객체가 반환됩니다. getCurrentPosition() 메서드의 두 번째 매개변수 showError는 사용자 위치 획득에 실패할 때 실행할 함수를 지정합니다. .
먼저 사용자의 지리적 위치 획득에 실패할 경우 몇 가지 오류 코드 처리 방법을 규정하는 showError() 함수를 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
Alert ("위치 지정 실패, 사용자가 위치 정보 요청을 거부했습니다.");
break;
케이스 오류.POSITION_UNAVAILABLE:
경고("위치 지정 실패, 위치 정보를 사용할 수 없습니다.")
break; > 케이스 오류.
경고("위치 확인 실패, 사용자 위치 획득 요청 시간 초과");
break;
케이스 오류.UNKNOWN_ERROR:
경고("위치 확인 실패, 위치 확인 시스템 실패) ");
break;
}
}

다시 showPosition() 함수를 살펴보겠습니다. 좌표의 위도와 경도를 호출하여 사용자의 위도와 경도를 가져옵니다.

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

function showPosition(position){
var lat = position.coords.latitude; //위도
var lag = position.coords.longitude; //경도
Alert('위도:' lat ',경도:' lag); >}

Baidu 지도 및 Google 지도 인터페이스를 사용하여 사용자 주소 얻기

위에서 우리는 HTML5의 Geolocation이 사용자의 위도와 위치를 얻을 수 있다는 것을 배웠습니다. 경도, 그래서 우리가 해야 할 일은 추상적인 경도와 위도를 읽기 쉽고 의미 있는 실제 사용자 지리적 위치 정보로 변환하는 것입니다. 다행스럽게도 Baidu Maps와 Google Maps는 이와 관련하여 HTML5에서 얻은 경도 및 위도 정보만 지도 인터페이스에 전달하면 되며 사용자의 지리적 위치는 지방 및 도시 정보는 물론 거리까지 포함하여 반환됩니다. 집 번호 및 기타 자세한 지리적 위치 정보. 먼저 페이지에 지리적 위치를 표시하는 div를 정의하고 각각 id#baidu_geo 및 id#google_geo를 정의합니다. 핵심 함수 showPosition()만 수정하면 됩니다. 먼저 Baidu 지도 인터페이스 상호작용을 살펴보겠습니다. Ajax를 통해 Baidu 지도 인터페이스에 위도 및 경도 정보를 보내고 인터페이스는 해당 지역, 도시 및 거리 정보를 반환합니다. Baidu 지도 인터페이스는 필요에 따라 div#baidu_geo에 필요한 정보를 표시할 수 있는 JSON 데이터 문자열을 반환합니다. 여기에서는 jQuery 라이브러리가 사용되며 jQuery 라이브러리 파일을 먼저 로드해야 합니다.

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

function showPosition(position){
var latlon = position.coords.latitude ',' position.coords.longitude;

//baidu
var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location=" latlon "&output=json&pois=0";
$.ajax({
유형: "GET",
데이터 유형: "jsonp",
url: url,
beforeSend: function(){
$("#baidu_geo ").html('정재정정...');
},
성공: 함수(json) {
if(json.status==0){
$("#baidu_geo ").html(json.result.formatted_address);
}
},
오류: 함수 (XMLHttpRequest, textStatus, errorThrown) {
$("#baidu_geo").html(latlon "地址位置获取失败");
}
});
});

再来看谷歌地图接口交互.同样我们将经纬島信息过Ajax方式发送给谷歌地图接歌地图接歌地图接应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON을 사용하면 JSON을 사용하여 JSON을 확장할 수 있습니다.

复代码

代码如下: