尝试将 Google Places API 与 JQuery 的 getJSON 函数一起使用
Posted
技术标签:
【中文标题】尝试将 Google Places API 与 JQuery 的 getJSON 函数一起使用【英文标题】：Trying to use Google Places API with JQuery's getJSON function 【发布时间】：2012-07-23 10:52:20 【问题描述】：这可能是非常基本的，但我正在尝试测试 Google Places API。我正在浏览文档并使用他们提供的一些示例。我正在尝试使用 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 响应应如下所示：
"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://maps.gstatic.com/mapfiles/place_api/icons/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://maps.gstatic.com/mapfiles/place_api/icons/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://maps.gstatic.com/mapfiles/place_api/icons/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://maps.gstatic.com/mapfiles/place_api/icons/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 号 Upper Level, Overseas Passenger Terminal/5 Hickson Road, The Rocks NSW, 澳大利亚 107 George Street, The Rocks NSW, 澳大利亚 澳大利亚新南威尔士州悉尼乔治街 483 号
这意味着它有效。 getJSON 函数是否没有正确解析 JSON 脚本？
【问题讨论】：
看到这个答案***.com/questions/5564830/… 【参考方案1】：我建议使用Google Maps JavaScript API v3 的Places Library。
你可以在here找到演示和使用文档。
【讨论】：
这可能行得通，但我很好奇为什么这段代码不能与远程 JSON 脚本一起使用。据我所知，谷歌并没有真正展示任何有价值的例子来说明如何使用 AJAX 来使用他们的谷歌地方服务。人们通常是怎么做的？顺便感谢您的回复。【参考方案2】：好吧，我或多或少想通了。我想出了你需要做什么才能让 getJSON 函数返回 JSON 解析的数据。您必须添加“回调=？”到查询字符串。
'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 中的响应并且格式有效。此外，如果从本地文件中读取，同样的响应也有效。
【讨论】：
'callback' 需要将 JSON 输出转换为 JSONP 输出。 JQM 中只能使用 JSONP。【参考方案3】：请试试下面的代码
<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>
你需要将它作为 Json 回调，因为它是跨域调用
【讨论】：
以上是关于尝试将 Google Places API 与 JQuery 的 getJSON 函数一起使用的主要内容，如果未能解决你的问题，请参考以下文章
Google Map/Places API 是不是与 iOS 6 兼容？
Google Places web api 不与 superagent 合作
如何使用 React 和 Google Places API 在 Google 地图上显示地点标记？