如何进行跨域AJAX调用Google Maps API？

Question

我正在尝试使用jQuery的$.getJSON方法调用Google Maps Geocoding webservice，但由于跨域安全问题而无法正常工作。

我在网上没有找到解决方案，但是我已经阅读了一些关于Google Javascript API或JSONP的文章，但目前仍没有清晰的答案...

有谁能帮助我吗？

谢谢！

- Pierre Duplouy

Answer 1

当Google Maps为JavaScript提供完整功能的客户端地理编码API时，我看不出使用服务器端地理编码Web服务的任何优势。

首先，这自动解决了您的同源问题，此外请求限制将按客户端IP地址而不是每个服务器IP地址计算，这对于流行网站可能会产生很大的差异。

以下是使用JavaScript Geocoding API v3的非常简单的示例：

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">     
   var geocoder = new google.maps.Geocoder();
   var address = 'London, UK';

   if (geocoder) {
      geocoder.geocode({ 'address': address }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
            console.log(results[0].geometry.location);
         }
         else {
            console.log("Geocoding failed: " + status);
         }
      });
   }    
</script>

如果出于某种原因，您仍然想使用服务器端 Web 服务，则可以设置一个非常简单的反向代理，也许使用 Apache 的 mod_proxy。这将允许您在 AJAX 请求中使用相对路径，而 HTTP 服务器将作为任何“远程”位置的代理。在 mod_proxy 中设置反向代理的基本配置指令是 ProxyPass。通常会按以下方式使用它：

ProxyPass     /geocode/     http://maps.google.com/maps/api/geocode/

在这种情况下，浏览器可以向/geocode/output?parameters发出请求，但服务器将通过充当代理来提供服务http://maps.google.com/maps/api/geocode/output?parameters。

- Daniel Vassallo

---

谢谢，我不知道有这样一个类的存在。它解决了我的问题 :) - Pierre Duplouy

@Daniel Vassallo，你有没有注意到使用API与http://maps.google.com/maps/place相比有什么不同？我在使用那个URL时得到了更好的结果。你对这方面有更多的信息吗？例如，Google可以定位这个：http://bit.ly/9wxOL2，但是我已经尝试使用API寻找同样的位置几天了，但没有任何成功。 - wenbert

使用这种方法的问题在于，很快就会达到您可以发出的请求数量的限制，因此最好使用服务器端来缓存它。 - Ian Devlin

区别在于使用服务器端方法，我可以捕获地址的错误部分（国家+邮政编码）。而使用客户端方法似乎无法做到这一点。 - Tim Vermaelen

直接调用API时，可以为每个请求指定语言参数，而使用客户端库则不可能。 - MyUserName