logo标签列表

使用JavaScript访问谷歌地图API

javascriptjquerygoogle-maps
3
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
    var url = "https://maps.googleapis.com/maps/api/place/search/json?key=AIzaSyBnEjp_CRcL_APx4mMsmuke9SV1PWZfnww&sensor=false&location=26.526437,-80.163004&radius=500&keyword=Physican%27s+Weight+Loss+Centers&types=";
    jQuery.getJSON(url, function (data) {
        alert(data);
    });

</script>
</body>
</html>

在运行上述代码时，我没有收到警告窗口。该URL没有任何回调函数。欢迎提供任何有用的链接或帮助，以便使用jQuery或Javascript解析/检索JSON URL中的数据。
这很可能是跨域问题，除非您恰好在相同的域（maps.googleapis.com）上运行此程序。 - gpojd
抱歉，我是新手...什么是跨域问题？您能建议如何从URL检索数据吗？ - hari86
3个回答
2

谷歌返回的头部信息不允许跨域查询。

HTTP/1.1 200 OK
status: 200 OK
version: HTTP/1.1
cache-control: private
content-encoding: gzip
content-length: 1932
content-type: application/json; charset=UTF-8
date: Mon, 24 Sep 2012 12:27:10 GMT
server: mafe
vary: Accept-Language
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

实际上你需要做的是让服务器端的一些代码获取数据，然后传递它以避免违反跨域规则。

或者看看谷歌是否提供API的JSONP版本。

2
我假设这是跨域的情况。在这种情况下，以下jQuery代码应该有效：
$.ajax(url, {
    crossDomain: true,
    dataType: 'jsonp'
}).success(function(data) {
    alert(data);
}).fail(function() {
    alert('fail');
});

注意：jQuery无法在跨域请求中获取HTTP状态代码，它只会在收到200响应时触发.success()，在非200时触发.fail() - 例如，您将难以处理404与403客户端方面的问题。如果您想要更精细的控制，请考虑使用类似jquery-jsonp的东西。
另外值得注意的是：使用浏览器调试器（firebug / whatever），这至少可以告诉您ajax请求返回了什么响应 - 很可能您的请求得到了非200 - 这将是jQuery的失败情况。在这种情况下，您的操作有些受限。
一些背景阅读：http://en.wikipedia.org/wiki/Same_origin_policy
这真的很棒。我没有进入“success”回调，但请求实际上已经通过了。似乎响应数据有一些JSON错误，这很奇怪... - Anders Arpi
你能告诉我你在请求中得到的http响应代码是什么吗？如果有响应正文，那也会很有用。当服务器正确响应时，你应该看到一个js函数（这是jsonp的“p”部分）包装了一个json对象。js函数的名称应该与“callback”参数匹配，该参数将成为jQuery为.ajax()调用构造的请求url的一部分。 - Paul Tregoing
请在此控制台中查看：http://jsfiddle.net/hhKtM/3/ （请注意，我不是提出问题的人，只是好奇 ：）） - Anders Arpi
虽然您不是最初的问题提出者，但这与最初的问题相关。您的示例代码失败是因为处理程序没有响应jsonp。在jQuery.ajax()跨域模式下，回调参数会添加到URL中：正确的响应将在一个函数中包装一个json对象，该函数与回调具有相同的名称。但是...这取决于服务器端代码来实现。 - Paul Tregoing
1

关于正在发生的事情以及如何一般性地解决它，可以参考Paul Tregoing的帖子。

然而，在这种情况下，实际上有一个适用于Google地图（包括您似乎正在使用的Places）的JavaScript API。您可以在这里查看它。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接