尝试将Google Places API与JQuery的getJSON函数一起使用

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

 
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] + "
"; console.log(myAddress[i]); } }); });

根据文档,对查询的结果JSON响应应如下所示:

 { "html_attributions" : [ "Listings by \u003ca href=\"http://www.yellowpages.com.au/\"\u003eYellow Pages\u003c/a\u003e" ], "results" : [ { "formatted_address" : "529 Kent Street, Sydney NSW, Australia", "geometry" : { "location" : { "lat" : -33.8750460, "lng" : 151.2052720 } }, "icon" : "http://sofzh.miximages.com/jquery/restaurant-71.png", "id" : "827f1ac561d72ec25897df088199315f7cbbc8ed", "name" : "Tetsuya's", "rating" : 4.30, "reference" : "CnRmAAAAmmm3dlSVT3E7rIvwQ0lHBA4sayvxWEc4nZaXSSjRtfKRGoYnfr3d5AvQGk4e0u3oOErXsIJwtd3Wck1Onyw6pCzr8swW4E7dZ6wP4dV6AsXPvodwdVyqHgyGE_K8DqSp5McW_nFcci_-1jXb5Phv-RIQTzv5BjIGS0ufgTslfC6dqBoU7tw8NKUDHg28bPJlL0vGVWVgbTg", "types" : [ "restaurant", "food", "establishment" ] }, { "formatted_address" : "Upper Level, Overseas Passenger Terminal/5 Hickson Road, The Rocks NSW, Australia", "geometry" : { "location" : { "lat" : -33.8583790, "lng" : 151.2100270 } }, "icon" : "http://sofzh.miximages.com/jquery/cafe-71.png", "id" : "f181b872b9bc680c8966df3e5770ae9839115440", "name" : "Quay", "rating" : 4.10, "reference" : "CnRiAAAADmPDOkn3znv_fX78Ma6X5_t7caEGNdSWnpwMIdDNZkLpVKPnQJXP1ghlySO-ixqs28UtDmJaOlCHn18pxpj7UQjRzR4Kmye6Gijoqoox9bpkaCAJatbJGZEIIUwRbTNIE_L2jGo5BDqiosqU2F5QdBIQbXKrvfQuo6rmu8285j7bDBoUrGrN4r6XQ-PVm260PFt5kwc3EfY", "types" : [ "cafe", "bar", "restaurant", "food", "establishment" ] }, { "formatted_address" : "107 George Street, The Rocks NSW, Australia", "geometry" : { "location" : { "lat" : -33.8597750, "lng" : 151.2085920 } }, "icon" : "http://sofzh.miximages.com/jquery/restaurant-71.png", "id" : "7beacea28938ae42bcac04faf79a607bf84409e6", "name" : "Rockpool", "rating" : 4.0, "reference" : "CnRlAAAAVK4Ek78r9yHV56I-zbaTxo9YiroCbTlel-ZRj2i6yGAkLwNMm_flMhCl3j8ZHN-jJyG1TvKqBBnKQS2z4Tceu-1kZupZ1HSo5JWRBKd7qt2vKgT8VauiEBQL-zJiKVzSy5rFfilKDLSiLusmdi88ThIQqqj6hKHn5awdj6C4f59ifRoUg67KlbpuGuuW7S1tAH_EyBl6KE4", "types" : [ "restaurant", "food", "establishment" ] }, { "formatted_address" : "483 George Street, Sydney NSW, Australia", "events" : [ { "event_id" : "7lH_gK1GphU", "summary" : "Google Maps Developer Meetup: Rockin' out with the Places API", "url" : "https://developers.google.com/places" } ], "geometry" : { "location" : { "lat" : -33.8731950, "lng" : 151.2063380 } }, "icon" : "http://sofzh.miximages.com/jquery/civic_building-71.png", "id" : "017049cb4e82412aaf0efbde890e82b7f2987c16", "name" : "Chinatown Sydney", "rating" : 4.0, "reference" : "CnRuAAAAsLNeRQtKD7TEUXWG6gYD7ByOVKjQE61GSyeGZrX-pOPVps2BaLBlH0zBHlrVU9DKhsuXra075loWmZUCbczKDPdCaP9FVJXB2NsZ1q7188pqRFik58S9Z1lcWjyVoVqvdUUt9bDMLqxVT4ENmolbgBIQ9Wy0sgDy0BgWyg5kfPMHCxoUOvmhfKC-lTefXGgnsRqEQwn8M0I", "types" : [ "city_hall", "park", "restaurant", "doctor", "train_station", "local_government_office", "food", "health", "establishment" ] } ], "status" : "OK" } 

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

529 Kent Street,Sydney NSW,澳大利亚上层,海外客运docker/ 5 Hickson Road,The Rocks NSW,澳大利亚107 George Street,The Rocks NSW,澳大利亚483 George Street,Sydney NSW,澳大利亚

这意味着它有效。 getJSON函数是否正确解析JSON脚本?

我建议使用Google Maps JavaScript API v3的Places库 。

您可以在此处找到有关如何使用它的演示和文档。

好吧,我或多或少想通了。 我想出了你需要做什么,以便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中检查了响应并且格式有效。 此外,如果从本地文件读取相同的响应。

请尝试以下代码

   

你需要把它作为Json回调,因为它是跨域调用