HTML5 위치정보 function_jquery를 사용하는 방법

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

위치정보는 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; 
    case error.POSITION_UNAVAILABLE: 
      alert("定位失败,位置信息是不可用"); 
      break; 
    case error.TIMEOUT: 
      alert("定位失败,请求获取用户位置超时"); 
      break; 
    case error.UNKNOWN_ERROR: 
      alert("定位失败,定位系统失效"); 
      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({ 
    type: "GET", 
    dataType: "jsonp", 
    url: url, 
    beforeSend: function(){ 
      $("#baidu_geo").html('正在定位...'); 
    }, 
    success: function (json) { 
      if(json.status==0){ 
        $("#baidu_geo").html(json.result.formatted_address); 
      } 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
      $("#baidu_geo").html(latlon+"地址位置获取失败"); 
    } 
  }); 
}); 

Google 지도 인터페이스 상호작용을 살펴보겠습니다. 마찬가지로 위도와 경도 정보를 Ajax를 통해 Google 지도 인터페이스로 보내면 인터페이스는 해당 지역, 도시, 거리 세부정보를 반환합니다. Google 지도 인터페이스는 또한 JSON 데이터 문자열을 반환합니다. 이러한 JSON 데이터는 Baidu 지도 인터페이스에서 반환된 것보다 더 자세하며 필요에 따라 div#google_geo에 필요한 정보를 표시할 수 있습니다.

function showPosition(position){ 
  var latlon = position.coords.latitude+','+position.coords.longitude; 
 
  //google 
  var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'; 
  $.ajax({ 
    type: "GET", 
    url: url, 
    beforeSend: function(){ 
      $("#google_geo").html('正在定位...'); 
    }, 
    success: function (json) { 
      if(json.status=='OK'){ 
        var results = json.results; 
        $.each(results,function(index,array){ 
          if(index==0){ 
          $("#google_geo").html(array['formatted_address']); 
          } 
        }); 
      } 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
      $("#google_geo").html(latlon+"地址位置获取失败"); 
    } 
  }); 
} 

위 코드는 Baidu 지도 인터페이스와 Google 지도 인터페이스를 각각 showPosition() 함수에 통합하여 실제 상황에 따라 호출할 수 있습니다. 물론 이것은 단순한 애플리케이션일 뿐입니다. 이 간단한 예제를 기반으로 많은 복잡한 애플리케이션을 개발할 수 있으므로 DEMO 데모에 액세스하려면 모바일 브라우저를 사용하는 것이 좋습니다.