谷歌地点 API 和 JQuery 请求 - 来源 http://localhost 不被 Access-Control-Allow-Origin 允许。

Question

我正在为一个涉及使用附近地点的项目进行测试。因此，我选择使用谷歌地点 API 进行测试。我在我的地图中使用了 Leaflet 和 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不起作用……有没有办法让它工作而不必使用Google Maps API？如果答案是否定的……有没有其他与谷歌同样好的位置API？

谢谢！

- LouieV

Answer 1

您正在尝试使用Places API Web服务, 该服务旨在用于服务器代码，不支持您需要的JavaScript的JSONP输出。

在JavaScript中，您需要使用Maps API V3中的Places Library。您不能直接从JavaScript或jQuery代码访问URL。(您可能可以发现Places Library使用的URL模式，但服务条款不允许直接使用API / Library，并且URL可能随时更改。)

您是否有不想使用JavaScript的Maps API的原因？

- Michael Geary

---

说实话，我想从我的工作中制作一个应用程序/服务，并尽可能远离谷歌。 - LouieV

当然，那很合理。我感到困惑的是想要直接从JavaScript使用Places API Web服务而不通过Maps API来使用它的想法。无论哪种方式都会使用Google服务。 - Michael Geary

是的，我已经释怀并开始使用地图API。 - LouieV

我知道这是一个老话题，但随着像Angular这样的FE框架的趋势，将简单的REST服务集成起来变得更加容易。我曾试图使用angular-resource，但出现了相同的问题。 - LessQuesar

Answer 2

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);

- C4rr13rX