【问题标题】：Issue using jQuery to do a google maps api call (JSON not being returned)使用 jQuery 进行 google maps api 调用的问题（未返回 JSON）
【发布时间】：2013-11-05 16:06:53
【问题描述】：

这是我最初使用的代码，并且直到昨天都运行良好（当时我注意到了它，但我不确定它什么时候确实停止工作了）。我知道这在上周初起作用，所以从那时到昨天之间的某个时候它坏了。我在一个名为 Alpha Anywhere 的 RAD 中运行此代码，但已在此程序之外（仅在一个 HTML 页面中）对其进行了测试，但它仍然无法正常工作。希望有人知道是否存在错误，或者我是否可以采取一些措施来解决此问题。我在 firefox 中运行了这个并打开了 firebug，这就是我看到错误的地方，让我知道 JSON 没有被检索到。

var $jq = jQuery.noConflict();

$jq.getJSON('http://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&sensor=false',function(results){

    // I have code in here to calculate miles driven per state 
    // (as in the above code origin and destination would be filled 
    // with variables but I went with this basic call because even this doesn't work).

});

以下代码在 Firefox 或 chrome 中运行时不起作用（截至目前 CDT 时间 2013 年 11 月 11 日晚上 10:26）。上面有萤火虫表明我没有得到谷歌的回应。但是，以下代码在 Mac OSX 10.9 上的 safari 7.0.x 中运行时会响应。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://api.jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"></script>
        <script>
            function getData() {
                var url = 'http://maps.googleapis.com/maps/api/directions/json?origin=Huntsville,AL&destination=Atalanta,GA&sensor=false';
                var $jq = jQuery.noConflict();
                $jq.getJSON(url, function (results) {
                    alert(results.routes[0].legs[0].distance.value);
                });
            }
        </script>
        <title>jQuery Debug of Google API</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <button onclick="getData();">click</button>
    </body>
</html>

【问题讨论】：

看起来 url 正在注释掉其余的代码。我打赌你需要在它周围加上引号。
我为错误输入道歉，我的代码正确引用了 url。感谢您在这里指出这一点，以便我可以在我的问题中解决这个问题。使用 jQuery 和谷歌地图 api 的其他人有同样的问题吗？
解决了！这是不请求 JSONP 和请求后不提供服务的组合。

标签： javascript jquery json google-maps jsonp

【解决方案1】：

这里有几个问题：

首先，来自jsonp explained：

您可能知道您不能直接从其他域加载数据文件。这是一个由来已久的安全问题，通常通过 API、REST 等共享数据来解决。 但是有办法解决这个问题 ... [例如] JSONP

在 jQuery 中执行此操作：

使用$.ajax，添加dataType: 'jsonp'，附加回调=？到网址
使用$.getJSON (shorthand for .ajax)，在请求的 URL 末尾添加 callback=?。

这表示我们要使用JSONP。删除它，将使用一个普通的 JSON 请求；由于same origin policy，这将失败。

另一个问题是某些外部 API（如 Google Maps Directions API）不会自动提供 JSONP。如果服务器不知道如何处理回调参数，那么来自 API 的响应仍然是 JSON，而不是 JSONP。为了保证返回的内容格式正确，可以通过jsonp.guffa.com这样的代理服务器

要使用它，请将请求更改为@987654330@<i>YourEncodedURI</i>
您已将 YourEncodedURI 替换为 encoded 请求的 url 字符串。

把它们放在一起：

var mapsUrl    = 'http://maps.googleapis.com/maps/api/directions/json' + 
                 '?origin=Toronto&destination=Montreal&sensor=false';
var encodedUrl = encodeURIComponent(mapsUrl);
var proxyUrl   = 'http://jsonp.guffa.com/Proxy.ashx?url=' + encodedUrl;

$.ajax({
    url: proxyUrl,
    dataType: 'jsonp',
    cache: false,
    success: function (data) {
        console.log(data);
    }
});

Working Demo in jsFiddle

进一步阅读：

What is JSONP all about?

【讨论】：

出于某种原因，我能够通过删除 getJSON 调用末尾的分号来完成这项工作。但是，由于某种原因，它现在再次没有响应。我现在正在研究这个问题，但我很难理解为什么它有时会起作用，而其他的却不起作用。我已经使用附加文档编辑了我的原始帖子，该文档执行 jQuery 调用（只是一个标准的 HTML 页面），如果您在带有 firebug 的 firefox 中运行它，您将看到谷歌没有响应。然而，这个页面在 safari 7.0.x（在 Mac OSX 10.9 上）运行时会响应。