3

私は2つの場所の間の距離を見つけようとしています。そのために、Google Web サービスを使用しました。その Web サービスから JSON 応答を受け取りましたが、JavaScript 関数でその JSON 応答からの距離を取得できません。

以下の私のコードを参照してください：

function myjourneysubdetails(){
  var fp = jQuery('#fp').val();
  var tp = jQuery('#tp').val();
  var city = jQuery('#city').val();
  alert(fp);
  $.ajax({
    type : 'GET',
    url : 'http://maps.googleapis.com/maps/api/distancematrix/json?origins=Silk board&destinations=marathahalli&language=en-US&sensor=false',
    async: false,
    success : function(data) {
      alert("Success");
      var locObject = eval('(' + JSON.stringify(data) + ')');
      alert("locObject: "+locObject);
      alert("Destination: "+locObject.destination_addresses);
      var origins = data.origin_addresses;
      var destinations = data.destination_addresses;
      alert('destinations'+destinations);
      for (var i = 0; i < origins.length; i++) {
        var results = data.rows[i].elements;
        for (var j = 0; j < results.length; j++) {
          var element = results[j];
          var distance = element.distance.text;
          var duration = element.duration.text;
          var from = origins[i];
          var to = destinations[j];
          alert('distance'+distance);
        }
      }
    },
    error : function(xhr, type) {
      alert('Internal Error Occoured! '+xhr+' : '+type); 
    }
  });
}

前もって感謝します。

4

1 に答える 1

0

あなたが抱えている問題は、Web ブラウザの「同一オリジン ポリシー」と呼ばれるものです。

基本的に、Web ブラウザーによって実装された多数のセキュリティ対策の 1 つ (および提案および実装された最も初期の 1 つ) として、Web ページの URL とは異なるドメインに対して ajax 要求を行うことは許可されていません。maps.googleapis.comしたがって、コードがそのまま機能する唯一の方法は、ドメインでページをホストするように Google を説得できる場合です。

明らかにそれはうまくいきません。これにはいくつかの回避策があります。現在最も一般的な方法は JSONP です。残念ながら、Google マップは JSONP をサポートしていません。フラッシュまたは Java アプレットを使用してリクエストを転送するなど、他にもいくつかの方法があります。しかし、最も単純で最も互換性のある方法は、この問題に対する独自の解決策です。サーバーでリクエストをプロキシします。

プロキシが機能する理由は、プログラミング言語と Web サーバーは、Web ブラウザーとは異なり、インターネット上のどこに接続するかを気にしないためです。これを行うにはいくつかの方法があります。プロキシを実行する Web アプリを作成するか (たとえば、PHP の単純なプロキシ: https://github.com/cowboy/php-simple-proxy/ )、要求をプロキシするように Web サーバーを構成できます (たとえば、 apache mod_proxy または mod_rewrite を使用するか、サーバーにインストールされた専用のプロキシ サーバーを使用できます。

たとえば、コードでは、実際にこれを行う必要があります。

$.ajax({
    type : 'GET',
    url : 'http://myserver.com/proxy/distancematrix/json?origins=Silk board&destinations=marathahalli&language=en-US&sensor=false',

次に、次のような方法でそのリクエストを転送するようにサーバーを構成します。

# Example of Apache mod_rewrite proxying:
RewriteEngine on
RewriteRule ^/proxy/(.*) http://maps.googleapis.com/maps/api/$1 [P]

警告の言葉：

どのような方法であれ、これがインターネットであることを忘れないでください。オープン プロキシを作成しないでください。そうした場合、ハッカーがプロキシを使用してスパムや DOS 攻撃などを転送するリスクがあり、サーバーから送信されたように見えるため、責任を負うことになります。これを防ぐ最善の方法は、プロキシ URL を Google マップにハードコードして、他のユーザーがサーバーを使用して他の場所に接続できないようにすることです。URL全体ではなく、クエリパラメータのみを転送してください。

于 2012-11-16T07:20:15.980 に答える