2016-10-29 3 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); 
    }); 
    } 
}]) 

問題:

私は正常でジオロケーションサービスを使用することができ、私は彼らの場所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からこれらのタイプのリクエストを行うことができますか、またはバックエンドをセットアップする必要がありますか代わりにその電話をかけるには?

私はCORSの問題に合格したメソッドとしてJSONPを使用しようとしましたが、データにアクセスできないという問題があります。それは無効な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" : [] 
     }, 

答えて

3

あなたがグーグルに含まライブラリを介してクライアント側の場所APIを使用することができますJavaScript APIをマップします。

それがどのように動作するかを理解するために、このページを参照してください:

https://developers.google.com/maps/documentation/javascript/places

そうでない場合は、Googleにリクエストを送信し、クライアント側のコードへの応答を渡すためにあなたのバックエンドサーバを作成する必要があります。

希望すると助かります!

0

JSONPがこのような状況で動作する可能性があります.Jsonpはクロスドメインの問題に役立ちます。

関連する問題