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

时间:2010-05-27 13:59:34

标签: javascript google-maps cross-domain jsonp google-maps-api-3

我正在尝试对Google Maps Geocoding webservice进行jQuery $.getJSON调用,但由于跨域安全问题,这不起作用。

我无法在网上找到它,但我已经阅读了一些关于Google Javascript API或JSONP的内容,但到目前为止还没有明确答案......

有人能让我高兴吗?

谢谢!

1 个答案:

答案 0 :(得分:88)

当Google地图为JavaScript提供功能齐全的Server-side Geocoding Web Service时,我发现使用Client-side Geocoding API没有任何优势。

首先,这会自动解决您的同源问题,此外,会根据客户端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服务,你可以设置一个非常简单的reverse proxy,如果你使用的是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的代理来实现此目的。