2016-10-29 70 views
0

新角,試圖使用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); 
    }); 
    } 
}]) 

問題: 當我嘗試類似的GET請求他們的地方API - 我得到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提出這些類型的請求,還是需要設置backen d來打電話嗎?

我嘗試使用JSONP作爲通過CORS問題的方法,但後來我遇到了無法訪問數據的問題。不知道是否是無效的JSON ...但它說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" : [] 
     }, 

回答

0

我認爲JSONP可能在這種情況下工作,Jsonp有助於解決跨域問題。