Google 的 Places API 和 JQuery 请求 - Access-Control-Allow-Origin 不允许来源 http://localhost

Posted

技术标签:

【中文标题】Google 的 Places API 和 JQuery 请求 - Access-Control-Allow-Origin 不允许来源 http://localhost【英文标题】:Google's Places API and JQuery request - Origin http://localhost is not allowed by Access-Control-Allow-Origin 【发布时间】:2013-03-28 16:14:45 【问题描述】:

我正在为我想到的一个项目进行一些测试,其中涉及使用附近的地方。所以我和那个大家伙一起去玩弄谷歌的 Places Api。我正在为我的地图使用带有 openstreet 瓷砖的传单。现在一切都很好,直到我尝试使用该死的东西。

var lat = coords.lat;
var lng = coords.lng;
var apiUrl = "https://maps.googleapis.com/maps/api/place/nearbysearch/json";
var data = 
    key: 'AIzaSyBl8bmE8kQT7RjoXhP6k2yDti44h9-fSUI',
    location: lat+','+lng,
    radius: '10000',
    sensor: 'false',
    rankby: 'prominence',
    types: 'bar|night_club'
;
$.ajax(
  url: apiUrl,
  type: 'POST',
  data: data,    
  dataType:"jsonp",
  crossDomain: true,
  success: function(data) 
            var obj = $.parseJSON(data);
                // console.log(data.next_page_token);
          
);

dataType 属性更改为json 我得到Origin http://localhost is not allowed by Access-Control-Allow-Origin. 使用jsonp 我得到一个解析错误Unexpected token : 显然$.parseJSON 不起作用...有没有办法使这项工作无需使用谷歌地图API?如果答案是否定的......还有其他地方的api和google的一样好吗?

谢谢!

【问题讨论】:

【参考方案1】:

https://github.com/joshtronic/php-googleplaces

刚刚制作并上传到我的一个网站。

<?php
include 'GooglePlaces.php';
include 'GooglePlacesClient.php';
$google_places = new joshtronic\GooglePlaces('your_key');
$google_places->location = array(<your_lat>, <your_lon>);
$google_places->radius   = 800;
$results                 = $google_places->nearbySearch();
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); 
echo json_encode($results);

【讨论】:

【参考方案2】:

您正在尝试使用 Places API web service,它旨在用于服务器代码,不支持 javascript 所需的 JSONP 输出。

在 JavaScript 中,您需要使用来自 Maps API V3 的 Places Library。您不能直接从 JavaScript 或 jQuery 代码中点击 URL。 (您可能可能会发现 Places Library 使用的 URL 模式,但服务条款不允许在不通过 API/Library 的情况下直接使用,并且 URL 可能随时更改。)

您是否有不想通过 JavaScript 使用 Maps API 的原因?

【讨论】:

老实说,我想从我的工作中制作一个应用程序/服务,并希望尽可能远离谷歌。 当然,这很合理。让我感到困惑的是,想要直接从 JavaScript 使用 Places API Web 服务而不通过 Maps API 来使用它的想法。无论哪种方式,您仍然可以使用 Google 服务。 是的,我平静下来并开始使用地图 api。 我知道这是一个老话题了,但是随着像 Angular 这样的 FE 框架的趋势,它更容易集成简单的 REST 服务。我试图使用 angular-resource 但遇到了同样的问题。

以上是关于Google 的 Places API 和 JQuery 请求 - Access-Control-Allow-Origin 不允许来源 http://localhost的主要内容,如果未能解决你的问题,请参考以下文章

结合 Places Autocomplete 和 Google Time Zone API

如何使用 React 和 Google Places API 在 Google 地图上显示地点标记?

反应:Google Places API/ Places 详细信息

InvalidValueError:initAutocomplete 不是 Google Places 和 Autocomplete API 的功能

在 Google Places API 中嵌入当前位置(经度和纬度)

Google Places API,获取用户地址