解析Google Places API的JSON结果
我正尝试从Google API附近位置检索信息,并以简单的HTML格式显示结果。 虽然这样做,但由于我对Javascript的知识不足,我面临着不同的问题。
我会欣赏代码示例,但会通过代码LOVE解释,而不是文档。
基本上这个URL https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&type=restaurant&key=MY_API_KEY
输出这些数据(注意,这只是众多结果中的一个结果(请参阅所有结果的URL +正确的npt)
{
"html_attributions" : [],
"next_page_token" : "here is token too long",
"results" : [
{
"geometry" : {
"location" : {
"lat" : -33.87036190000001,
"lng" : 151.1978505
},
"viewport" : {
"northeast" : {
"lat" : -33.8690182697085,
"lng" : 151.1991515302915
},
"southwest" : {
"lat" : -33.8717162302915,
"lng" : 151.1964535697085
}
}
},
"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
"id" : "e58f0f9ecaf15ab719d305b93265cafc00b01a3f",
"name" : "The Little Snail Restaurant",
"opening_hours" : {
"open_now" : true,
"weekday_text" : []
},
"photos" : [
{
"height" : 585,
"html_attributions" : [
"u003ca href="https://maps.google.com/maps/contrib/114727320476039103791/photos"u003eThe Little Snail Restaurantu003c/au003e"
],
"photo_reference" : "CmRYAAAA9JX9PTn1bmb7I-51-6qHIkb8-FC54UOoInko8dlSWGMBn3Lsuu9KrnJuF8nMsWkmzKtvPdx3rjxkZJ6DzC2ossHhTP7Fk3m2P-no8v0hDAbMzPvgEUmnXTQw9ziku2FzEhCwAMb0F48RPS9i0z1-dKlzGhTWBAu81Wxih_X6hatmN6264p_RdA",
"width" : 582
}
],
"place_id" : "ChIJtwapWjeuEmsRcxV5JARHpSk",
"price_level" : 2,
"rating" : 4.2,
"reference" : "CmRRAAAAtVf1uNEV0aXI3PY8VrYSsvt_MpcKlA8DQuHDv3X4AxhMySFbpLgU5FUtKCf-im0HeLDz7bisAHJ81HRW53Pjag4W4L4bPTDWi1vD125x2710YzO0-IQY_vl6OSJ4mbZAEhBi5XRRsGJlCfX-PszD2271GhQt73oy2T3dIiUQ7_yz60rZAas0nw",
"scope" : "GOOGLE",
"types" : [ "restaurant", "food", "point_of_interest", "establishment" ],
"vicinity" : "3/50 Murray Street, Pyrmont"
},
到目前为止,我已经阅读了Google NP Docs,在YouTube上观看了2个关于如何使用JSON(这非常棒)的40万视频,并且尽可能多地阅读了StackOverflow,看看是否有人有一小段代码可以让我开始但没有机会。
似乎大部分信息都是针对Android使用情况的,Google没有提供实际的代码示例(这很奇怪,因为它们有很多地图相关查询的示例)。
无论如何,如果我使用XMLHttpRequest控制台会给我一个Access Control Allow Origin
的错误,所以我在线阅读的所有东西(主要是W3C),并在YouTube上看到如何使用JSON和AJAX(甚至写了一些线拉来自URL的信息并随时随地播放)不会为我提供任何帮助,因为我相信Google有自己的方式来拉动JSON以避免ACAO问题。 我也尝试过JQUERY Json Parse,但它不起作用,我也得到了相同的结果。
所以最后,我在20小时前开始不知道JSON是什么,并且在大约2小时后使用从URL中提取的JSON文件进行工作。 但是18个小时过去了,我相信有一段时间需要帮助,实际上我没有想法从哪里开始。
请阅读下面的SO问题,以详细解释您的问题: - XmlHttpRequest错误:Access-Control-Allow-Origin不允许原始null
一个简单的解决方法是使用' $ .getJSON() '方法并传递' callback =? '参数在URL中。
请在下面找到相同的工作示例的链接: -
https://plnkr.co/edit/akJqmQPsA9cT0t2nrmWJ?p=catalogue
IMP :请记住替换您自己的API密钥,不要使用尖括号。
$.getJSON("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&type=restaurant&key=<API_KEY>&callback=?", function(data){
console.log("Data: " + data);
});
另外,正如其中一条评论中已经提到的那样,请删除问题中的API密钥 ,因为它意味着是私密的,并且可能会被滥用。
希望这可以帮助!
链接地址: http://www.djcxy.com/p/45969.html