尝试将Google Places API与JQuery'；s getJSON函数_Jquery_Json_Getjson_Google Places Api

尝试将Google Places API与JQuery'；s getJSON函数

jquery json

尝试将Google Places API与JQuery'；s getJSON函数,jquery,json,getjson,google-places-api,Jquery,Json,Getjson,Google Places Api,这可能是非常基本的，但我正在尝试测试GooglePlacesAPI。我正在浏览文档并使用它们提供的一些示例。我尝试使用JQuery getJSON函数，因为我已经成功地使用它异步访问外部JSON文件，所以我认为这可能是获得Google Places查询JSON结果的一个好方法。这是我试图使用的代码： <body> <div id="message"></div> <script type="text/javascript"> var re

这可能是非常基本的，但我正在尝试测试GooglePlacesAPI。我正在浏览文档并使用它们提供的一些示例。我尝试使用JQuery getJSON函数，因为我已经成功地使用它异步访问外部JSON文件，所以我认为这可能是获得Google Places查询JSON结果的一个好方法。这是我试图使用的代码：

<body>
<div id="message"></div>
<script type="text/javascript">

    var requestURL = 'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key='my_google_places_key';
    $(document).ready(function () {
        $.getJSON(requestURL, function (data) {

            for (i = 0; i < data.results.length; i++) {
                myAddress[i] = data.results[i].formatted_address;
                document.getElementById("message").innerHTML += myAddress[i] + "<br>";
                console.log(myAddress[i]);
            }

        });
    });  


</script>

</body>

如果复制此JSON脚本并将其保存到文件中，我可以访问它，并在浏览器上显示以下结果：

澳大利亚新南威尔士州悉尼肯特街529号澳大利亚新南威尔士州罗克斯镇希克森路5号海外客运站上层澳大利亚新南威尔士州罗克斯乔治街107号澳大利亚新南威尔士州悉尼乔治街483号

这意味着它能工作。getJSON函数是否未正确解析JSON脚本？

我建议使用的

您可以找到演示和如何使用它的文档。

好的，我或多或少都明白了。我了解了需要做什么，以便getJSON函数返回JSON解析的数据。您必须将“callback=？”添加到查询字符串中

'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key="myKey"&callback=?';

但是，现在的问题是，我的控制台中出现了一个错误，表示：

SyntaxError: invalid label
[Break On This Error]   

"html_attributions" : [

 json?l...0080533 (line 2, col 3)

这很奇怪，因为我在JSONLint中检查了响应，并且格式有效。此外，如果从本地文件读取，同样的响应也可以工作

请尝试下面的代码

      <body>
     <div id="message"></div>
     <script type="text/javascript">
        $(document).ready(function () {
        $.ajax({
        type: 'GET',
        url: 'https://maps.googleapis.com/maps/api/place/searc/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key='my_google_places_key';',
        async: false,
        jsonpCallback: 'jsonCallback',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function (data) {
             for (i = 0; i < data.results.length; i++) {
            myAddress[i] = data.results[i].formatted_address;
            document.getElementById("message").innerHTML += myAddress[i] + "<br>";
            console.log(myAddress[i]);
        };
        },
        error: function (e) {
            console.log(e.message);
        }
    });
});  
 </script>
 </body>


$（文档）.ready（函数（）{
$.ajax({
键入：“GET”，
网址：'https://maps.googleapis.com/maps/api/place/searc/json?location=-33.8670522151.1957362&radius=500&types=food&name=harbor&sensor=false&key='my\u google\u places\u key''，
async:false，
JSONPCCallback:'jsonCallback'，
contentType:“应用程序/json”，
数据类型：“jsonp”，
成功：功能（数据）{
对于（i=0；i”；
console.log（我的地址[i]）；
};
},
错误：函数（e）{
控制台日志（e.message）；
}
});
});

您需要将其设置为Json回调，因为它可能是跨域调用

，但我很好奇为什么这段代码不能用于远程Json脚本。就我所见，谷歌并没有真正展示任何有价值的例子来说明如何使用AJAX使用他们的GooglePlaces服务。人们通常是怎么做的？顺便说一下，感谢您的响应。将JSON输出转换为JSONP输出需要“回调”。JQM中只能使用JSONP。请参见此答案

      <body>
     <div id="message"></div>
     <script type="text/javascript">
        $(document).ready(function () {
        $.ajax({
        type: 'GET',
        url: 'https://maps.googleapis.com/maps/api/place/searc/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key='my_google_places_key';',
        async: false,
        jsonpCallback: 'jsonCallback',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function (data) {
             for (i = 0; i < data.results.length; i++) {
            myAddress[i] = data.results[i].formatted_address;
            document.getElementById("message").innerHTML += myAddress[i] + "<br>";
            console.log(myAddress[i]);
        };
        },
        error: function (e) {
            console.log(e.message);
        }
    });
});  
 </script>
 </body>