비교적 간단한 JavaScript 코드를 사용하여 위도 및 경도 및 고도를 포함하여 사용자의 지리적 위치의 세부 사항을 결정할 수있는 웹 응용 프로그램을 만들 수 있습니다. 일부 웹 응용 프로그램은 시간이 지남에 따라 사용자 위치의 이동을 모니터링하여 내비게이션 기능을 제공 할 수도 있으며, 이는 Googlemaps API와 같은 MAP 시스템을 통합합니다.
HTML5는 지리적 위치 API를 제공하여 사용자 위치를 결정합니다. HTML5 의이 기능을 사용하여 지리적 위치 정보를 기반으로 응용 프로그램을 개발할 수 있습니다. 이 기사는 HTML5를 사용하는 방법을 공유하고 Baidu 및 Google지도 인터페이스를 사용하여 사용자의 정확한 지리적 위치 정보를 얻는 방법을 결합합니다.
Geolocation은 HTML5의 새로운 기능이므로 HTML5, 특히 지리적 위치가 더 정확한 iPhone과 같은 핸드 헬드 장치를 지원하는 최신 브라우저에서만 실행할 수 있습니다. 먼저, 사용자 장치의 브라우저가 지리적 위치를 지원하는지 여부를 감지해야하며, 그렇다면 지리적 정보를 얻으십시오. 이 기능은 사용자의 개인 정보를 침해 할 수 있습니다. 사용자의 동의가 아니라면 사용자의 위치 정보를 사용할 수 없으므로 응용 프로그램에 액세스 할 때 지리적 위치를 허용할지 여부를 촉구하며 물론 허용하도록 선택할 수 있습니다.
- functiongetLocation () {
- if (navigator.geolocation) {
- navigator.geolocation.getCurrentPosition (showposition, 샤워러);
- }또 다른{
- 경고 (브라우저는 지리적 위치를 지원하지 않습니다.);
- }
- }
위의 코드는 사용자 장치가 지리적 위치를 지원하는 경우 getCurrentPosition () 메소드를 실행 함을 보여줍니다. getCurrentPosition ()이 성공적으로 실행되면 좌표 객체가 매개 변수 showposition에 지정된 함수로 반환됩니다. getCurrentPosition () 메소드의 두 번째 매개 변수는 오류를 처리하는 데 사용되며, 이는 사용자 위치가 실패 할 때 실행되는 기능을 지정합니다.
먼저 사용자의 지리적 위치를 얻을 때 일부 오류 코드의 처리를 지정하는 기능 샤워러 ()를 살펴 보겠습니다.
- functionshowerror (오류) {
- 스위치 (error.code) {
- caseerror.permission_denied :
- 경고 (현지화 실패, 사용자는 지리적 위치 요청을 거부);
- 부서지다;
- caseerror.position_unavailable :
- 경고 (현지화 실패, 위치 정보를 사용할 수 없음);
- 부서지다;
- CaseError.Timeout :
- 경고 (찾기 실패, 사용자 위치 시간 초과를 요청);
- 부서지다;
- caseerror.unknown_error :
- 경고 (현지화 실패, 위치 시스템 실패);
- 부서지다;
- }
- }
함수 showposition ()을보고 코디의 위도와 경도를 호출하여 사용자의 위도와 경도를 얻으십시오.
- FunctionShowPosition (위치) {
- varlat = position.coords.latitude; // latitude
- varlag = position.coords.longitude; // 경도
- 경고 ( 'lat :'+lat+', 경도 :'+lag);
- }
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 라이브러리 파일을 먼저로드해야합니다.
- FunctionShowPosition (위치) {
- varlatlon = position.coords.latitude+','+position.coords.longitude;
- // 바이두
- varurl = http : //api.map.baidu.com/geocoder/v2/?
- $ .ajax ({
- 유형 : Get,
- 데이터 유형 : JSONP,
- URL : URL,
- beforesend : function () {
- $ (#baidu_geo) .html ( 'locating ...');
- },
- 성공 : 기능 (JSON) {
- if (json.status == 0) {
- $ (#baidu_geo) .html (json.result.formatted_address);
- }
- },
- 오류 : 함수 (xmlhttprequest, textstatus, errorthrown) {
- $ (#baidu_geo) .html (latlon+주소 위치 실패);
- }
- });
- });
Google Maps Interface Interaction을 살펴 보겠습니다. 마찬가지로, 우리는 AJAX를 통해 위도 및 경도 정보를 Google지도 인터페이스에 보냅니다. 인터페이스는 해당 지방, 도시 및 거리 세부 사항을 반환합니다. Google Maps Interface는 또한 일련의 JSON 데이터를 반환합니다. 이 JSON 데이터는 Baidu Maps 인터페이스에서 반환 한 것보다 더 상세합니다. 우리는 필요에 따라 div#google_geo에 필요한 정보를 표시 할 수 있습니다.
- FunctionShowPosition (위치) {
- varlatlon = position.coords.latitude+','+position.coords.longitude;
- varurl = 'http : //maps.google.cn/maps/api/geocode/json? latlng ='+latlon+'& language = cn';
- $ .ajax ({
- 유형 : Get,
- URL : URL,
- beforesend : function () {
- $ (#Google_geo) .html ( 'locating ...');
- },
- 성공 : 기능 (JSON) {
- if (json.status == 'ok') {
- varresults = json.results;
- $ .Each (결과, 기능 (색인, 배열) {
- if (index == 0) {
- $ (#Google_geo) .html (Array [ 'formatted_address']);
- }
- });
- }
- },
- 오류 : 함수 (xmlhttprequest, textstatus, errorthrown) {
- $ (#Google_Geo) .html (Latlon+주소 위치 실패);
- }
- });
- }
위의 코드는 Baidu 맵 인터페이스와 Google 맵 인터페이스를 각각 함수 showposition ()에 통합하며 실제 상황에 따라 호출 할 수 있습니다. 물론 이것은 단순한 응용 프로그램 일뿐입니다. 이 간단한 예제에 따라 많은 복잡한 응용 프로그램을 개발할 수 있습니다. 모바일 브라우저를 사용하여 데모 데모에 액세스하는 것이 좋습니다.