3

我试图找到两个位置之间的距离。为此，我使用了 Google 网络服务。我从该 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 浏览器实施的众多安全措施之一（也是最早提出和实施的措施之一），您不允许向与网页 url 不同的域发出 ajax 请求。maps.googleapis.com因此，让您的代码按原样工作的唯一方法是，如果您能够说服 google 在域上托管您的页面。

显然那是行不通的。有几种解决方法。目前最流行的方法是 JSONP。不幸的是，谷歌地图不支持 JSONP。还有其他几种方法，例如使用 Flash 或 Java 小程序为您转发请求。但最简单、最兼容的方法是这个问题的原始解决方案：代理服务器上的请求。

代理之所以起作用，是因为编程语言和 Web 服务器与 Web 浏览器不同，它不关心您连接到 Internet 的哪个位置。有几种方法可以做到这一点。您可以编写一个 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 硬编码到谷歌地图，这样人们就不能使用你的服务器连接到其他任何地方。只转发查询参数，而不是整个 url。

于 2012-11-16T07:20:15.980 回答