Question

我正在尝试配置Google Places API并使用AngularJS显示搜索结果。我使用自耕农生成角度并使用＆＃39; grunt＆＃39;来服务它。我用它来找到所有＆＃34; sport＆＃34;结果在某个地方。

angular.module('frontendApp')
 .controller('httpReqController', ['$scope', '$http', function($scope,$http) {
    console.log('next is on click');
    $scope.myFunction = function() {
      console.log('on click in place');
      $http.get('https://maps.googleapis.com/maps/api/geocode/json?address='+
                  $scope.address+
                  '&key=<API_KEY>')
        .success(function (response) {
          $scope.names = response;
          var location = response.results[0];
          console.log(location.geometry.location);
      // HTTP request to find the sport around the users place
      var comURL2 ='https://maps.googleapis.com/maps/api/place/nearbysearch/json?location='+
                   location.geometry.location.lat+
                   ','+
                   location.geometry.location.lng+
                   '&radius=50000&types='+
                   $scope.sport+
                   '&name='+
                   $scope.sport+
                   '&key=<API_KEY>';

      $http.get(comURL2).success(function (response) {
        $scope.names = response;
        console.log(response);
      });
    });
};
}]);

这在控制台上给我一个错误

next is on click                                                  search.js:23
on click in place                                                 search.js:30 
Object {lat: 48.1603191, lng: 8.8528498}
XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=48.16…types=badminton&name=badminton&key=<API_KEY>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

我已经尝试在gruntfile.js中添加cors标头

connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      open: true,
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
          function(req, res, next) {
            res.setHeader('Access-Control-Allow-Origin', '*');
            res.setHeader('Access-Control-Allow-Methods', '*');
            next();
          },
        ];
      }
    }
  },

但错误仍然存在。

我犯错的任何想法？

使用angularjs（yeoman）的谷歌地方api问题

0 个答案: