这是我最初使用的代码，直到昨天为止都工作得很好(当时我注意到了它，但我不确定它何时真正停止工作)。我知道这在上周初是有效的，所以从那时到昨天的某个时候它坏了。我正在名为 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 中运行时不起作用(截至 2013 年 11 月 11 日晚上 10:26 CDT)。有了 Firebug ，它表明我没有得到谷歌的回应。但是，以下代码在 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>
最佳答案
这里有几个问题:
首先，来自jsonp explained :
As you may be aware you cannot directly load data files from another domain. This is a security issue that has been around for a long time and is commonly solved by sharing data through an API, REST or such. However there are ways around this ... [for example] JSONP
要在 jQuery 中执行此操作:
- 使用
$.ajax，添加dataType: 'jsonp'，其中附加回调=？到 URL - 使用
$.getJSON( shorthand for.ajax)，添加callback=?在请求的 URL 末尾。
这表明我们要使用 JSONP 。删除它，将使用普通 JSON 请求；由于 same origin policy ，这将失败.
另一个问题是某些外部 API(例如 Google map Directions API )不会自动提供 JSONP。如果服务器不知道如何处理回调参数，那么 API 的响应仍将是 JSON，而不是 JSONP。为了确保返回的内容格式正确，可以通过代理服务器，如 jsonp.guffa.com
要使用它，请将请求更改为 <a href="http://jsonp.guffa.com/Proxy.ashx?url=" rel="noreferrer noopener nofollow">http://jsonp.guffa.com/Proxy.ashx?url=</a><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
<小时/>进一步阅读:
关于javascript - 使用 jQuery 执行 google map api 调用时出现问题(未返回 JSON)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19793406/