홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

HTML5 지리적 위치 위치 기능을 사용하는 방법

저자：Eve Cole 업데이트 시간：2025-08-20 01:32:02

비교적 간단한 JavaScript 코드를 사용하여 위도 및 경도 및 고도를 포함하여 사용자의 지리적 위치의 세부 사항을 결정할 수있는 웹 응용 프로그램을 만들 수 있습니다. 일부 웹 응용 프로그램은 시간이 지남에 따라 사용자 위치의 이동을 모니터링하여 내비게이션 기능을 제공 할 수도 있으며, 이는 Googlemaps API와 같은 MAP 시스템을 통합합니다.

HTML5는 지리적 위치 API를 제공하여 사용자 위치를 결정합니다. HTML5 의이 기능을 사용하여 지리적 위치 정보를 기반으로 응용 프로그램을 개발할 수 있습니다. 이 기사는 HTML5를 사용하는 방법을 공유하고 Baidu 및 Google지도 인터페이스를 사용하여 사용자의 정확한 지리적 위치 정보를 얻는 방법을 결합합니다.

Geolocation은 HTML5의 새로운 기능이므로 HTML5, 특히 지리적 위치가 더 정확한 iPhone과 같은 핸드 헬드 장치를 지원하는 최신 브라우저에서만 실행할 수 있습니다. 먼저, 사용자 장치의 브라우저가 지리적 위치를 지원하는지 여부를 감지해야하며, 그렇다면 지리적 정보를 얻으십시오. 이 기능은 사용자의 개인 정보를 침해 할 수 있습니다. 사용자의 동의가 아니라면 사용자의 위치 정보를 사용할 수 없으므로 응용 프로그램에 액세스 할 때 지리적 위치를 허용할지 여부를 촉구하며 물론 허용하도록 선택할 수 있습니다.

  1. functiongetLocation () {
  2. if (navigator.geolocation) {
  3. navigator.geolocation.getCurrentPosition (showposition, 샤워러);
  4. }또 다른{
  5. 경고 (브라우저는 지리적 위치를 지원하지 않습니다.);
  6. }
  7. }

위의 코드는 사용자 장치가 지리적 위치를 지원하는 경우 getCurrentPosition () 메소드를 실행 함을 보여줍니다. getCurrentPosition ()이 성공적으로 실행되면 좌표 객체가 매개 변수 showposition에 지정된 함수로 반환됩니다. getCurrentPosition () 메소드의 두 번째 매개 변수는 오류를 처리하는 데 사용되며, 이는 사용자 위치가 실패 할 때 실행되는 기능을 지정합니다.

먼저 사용자의 지리적 위치를 얻을 때 일부 오류 코드의 처리를 지정하는 기능 샤워러 ()를 살펴 보겠습니다.

  1. functionshowerror (오류) {
  2. 스위치 (error.code) {
  3. caseerror.permission_denied :
  4. 경고 (현지화 실패, 사용자는 지리적 위치 요청을 거부);
  5. 부서지다;
  6. caseerror.position_unavailable :
  7. 경고 (현지화 실패, 위치 정보를 사용할 수 없음);
  8. 부서지다;
  9. CaseError.Timeout :
  10. 경고 (찾기 실패, 사용자 위치 시간 초과를 요청);
  11. 부서지다;
  12. caseerror.unknown_error :
  13. 경고 (현지화 실패, 위치 시스템 실패);
  14. 부서지다;
  15. }
  16. }

함수 showposition ()을보고 코디의 위도와 경도를 호출하여 사용자의 위도와 경도를 얻으십시오.

  1. FunctionShowPosition (위치) {
  2. varlat = position.coords.latitude; // latitude
  3. varlag = position.coords.longitude; // 경도
  4. 경고 ( 'lat :'+lat+', 경도 :'+lag);
  5. }

Baidu지도 및 Google지도 인터페이스를 사용하여 사용자 주소를 얻습니다.

HTML5의 지리 위치가 사용자의 위도와 경도를 얻을 수 있다는 것을 이해하면서, 우리가해야 할 일은 추상 위도와 경도를 읽을 수있는 의미있는 실제 사용자 지리적 위치 정보로 변환하는 것입니다. 다행히 Baidu지도와 Google지도는 이와 관련하여 인터페이스를 제공합니다. 우리는 HTML5에서 얻은 위도 및 경도 정보를 MAP 인터페이스로 전달하면되며 지방, 시립 및 지역 정보, 거리 및 주택 번호와 같은 자세한 지리적 위치 정보를 포함한 사용자의 지리적 위치를 반환합니다.

먼저 DIV를 정의하여 페이지에 지리적 위치를 표시하고 ID##Baidu_geo 및 ID#Google_geo를 각각 정의합니다. Key Function ShowPosition ()을 수정하면됩니다. 먼저 Baidu 맵 인터페이스 상호 작용을 살펴 보겠습니다. 위도 및 경도 정보를 AJAX를 통해 Baidu MAP 인터페이스로 보냅니다. 인터페이스는 해당 지방, 시립 및 거리 정보를 반환합니다. Baidu Map Interface는 일련의 JSON 데이터를 반환하며 필요에 따라 DIV#Baidu_geo에 필요한 정보를 표시 할 수 있습니다. jQuery 라이브러리는 여기에 사용되며 jQuery 라이브러리 파일을 먼저로드해야합니다.

  1. FunctionShowPosition (위치) {
  2. varlatlon = position.coords.latitude+','+position.coords.longitude;
  4. // 바이두
  5. varurl = http : //api.map.baidu.com/geocoder/v2/?
  6. $ .ajax ({
  7. 유형 : Get,
  8. 데이터 유형 : JSONP,
  9. URL : URL,
  10. beforesend : function () {
  11. $ (#baidu_geo) .html ( 'locating ...');
  12. },
  13. 성공 : 기능 (JSON) {
  14. if (json.status == 0) {
  15. $ (#baidu_geo) .html (json.result.formatted_address);
  16. }
  17. },
  18. 오류 : 함수 (xmlhttprequest, textstatus, errorthrown) {
  19. $ (#baidu_geo) .html (latlon+주소 위치 실패);
  20. }
  21. });
  22. });

Google Maps Interface Interaction을 살펴 보겠습니다. 마찬가지로, 우리는 AJAX를 통해 위도 및 경도 정보를 Google지도 인터페이스에 보냅니다. 인터페이스는 해당 지방, 도시 및 거리 세부 사항을 반환합니다. Google Maps Interface는 또한 일련의 JSON 데이터를 반환합니다. 이 JSON 데이터는 Baidu Maps 인터페이스에서 반환 한 것보다 더 상세합니다. 우리는 필요에 따라 div#google_geo에 필요한 정보를 표시 할 수 있습니다.

  1. FunctionShowPosition (위치) {
  2. varlatlon = position.coords.latitude+','+position.coords.longitude;
  4. //Google
  5. varurl = 'http : //maps.google.cn/maps/api/geocode/json? latlng ='+latlon+'& language = cn';
  6. $ .ajax ({
  7. 유형 : Get,
  8. URL : URL,
  9. beforesend : function () {
  10. $ (#Google_geo) .html ( 'locating ...');
  11. },
  12. 성공 : 기능 (JSON) {
  13. if (json.status == 'ok') {
  14. varresults = json.results;
  15. $ .Each (결과, 기능 (색인, 배열) {
  16. if (index == 0) {
  17. $ (#Google_geo) .html (Array [ 'formatted_address']);
  18. }
  19. });
  20. }
  21. },
  22. 오류 : 함수 (xmlhttprequest, textstatus, errorthrown) {
  23. $ (#Google_Geo) .html (Latlon+주소 위치 실패);
  24. }
  25. });
  26. }

위의 코드는 Baidu 맵 인터페이스와 Google 맵 인터페이스를 각각 함수 showposition ()에 통합하며 실제 상황에 따라 호출 할 수 있습니다. 물론 이것은 단순한 응용 프로그램 일뿐입니다. 이 간단한 예제에 따라 많은 복잡한 응용 프로그램을 개발할 수 있습니다. 모바일 브라우저를 사용하여 데모 데모에 액세스하는 것이 좋습니다.

관련 기사