Angular的新手,它尝试使用Google Maps / Places API设置一个非常简单的应用程序。
我可以通过以下方式成功使用地理位置服务:
.controller('MainCtrl', [ '$scope', '$http', function($scope, $http){ $scope.userLocation = []; $scope.currentLocation = function() { $http({ method: 'GET', url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=xxx' }).then(function successCallback(response) { $scope.userLocation.push(response); }); } }])
问题: 当我尝试对他们的Places API进行类似的GET请求时-我收到CORS错误:
XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=36.23…5.1458888&type=bar&key=xxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:3000' is therefore not allowed access.
问题: 我是否可以从Angular发出这些类型的请求,还是需要设置后端来进行该调用?
我尝试使用JSONP作为方法,该方法通过了CORS问题,但随后出现无法访问数据的问题。不知道它是否是无效的JSON …,但显示为Unexpected identifier :,当我查看源代码时,对我来说似乎是非常好的数据:
Unexpected identifier :
{ "html_attributions" : [], "results" : [ { "geometry" : { "location" : { "lat" : 36.2388477, "lng" : -115.1540073 }, }, "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png", "id" : "578bfba1f17b0c5fbdafd5b71600b50d3e95c1ca", "name" : "Ruby Tuesday", "opening_hours" : { "open_now" : true, "weekday_text" : [] },
您可以通过Google Maps JavaScript API中包含的库在客户端使用Places API。
请参考此页面以了解其工作方式:
https://developers.google.com/maps/documentation/javascript/places
否则,您必须创建后端服务器才能将请求发送到Google,并将响应传递给客户端代码。
希望能帮助到你!