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() メソッドの 2 番目のパラメータ 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 Maps および Google Maps インターフェースを使用してユーザーのアドレスを取得します
上記で、HTML5 の地理位置情報がユーザーの経度と緯度を取得できることを学びました。そのため、必要なのは、抽象的な経度と緯度を、読み取り可能で意味のある実際のユーザーの地理的位置情報に変換することです。幸いなことに、Baidu Maps と Google Maps は、この点に関するインターフェースを提供しています。HTML5 で取得した経度および緯度の情報を地図インターフェースに渡すだけで、省や都市の情報、さらには道路などの地理的位置が返されます。家屋番号およびその他の詳細な地理的位置情報。
まず、ページ上の地理的位置を表示する div を定義し、それぞれ id#baidu_geo と id#google_geo を定義します。変更する必要があるのは、キー関数 showPosition() だけです。まず、Baidu 地図インターフェイスの対話を見てみましょう。Ajax を介して緯度と経度の情報を Baidu 地図インターフェイスに送信すると、インターフェイスは対応する省、都市、番地情報を返します。 Baidu マップ インターフェイスは JSON データの文字列を返します。必要に応じて必要な情報を div#baidu_geo に表示できます。ここでは 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() に統合しており、実際の状況に応じて呼び出すことができます。もちろん、これは単純なアプリケーションにすぎません。この単純な例に基づいて、多くの複雑なアプリケーションを開発できます。デモ デモにアクセスするには、モバイル ブラウザを使用することをお勧めします。