如何做angularjs控制器

一個谷歌的地方API搜索我試圖讓使用谷歌的地方API的地方在我的控制器：如何做angularjs控制器

$http.get("https://maps.googleapis.com/maps/api/place/radarsearch/json?location=51.503186,-0.126446&radius=5000&type=museum&key=MY_KEY") 
    .then(function(response) { 
     $scope.results = response.data; 
     console.log($scope.results); 
    });

可惜，這是行不通的。我的console.log後，我得到以下錯誤。

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/radarsearch/json?location=51.503…126446&radius=5000&type=museum&key=MY_KEY. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9004' is therefore not allowed access.

順便說一句，這不是唯一的本地主機，因爲我已經嘗試在一個活的服務器相同。什麼是谷歌angularjs的方式來實現這一目標？

來源

2016-08-20 Obasi Obeny Oj

你有沒有簡單地在你的index.html中添加谷歌地圖文件與所有的JavaScript文件？ –

是的，我的谷歌裝載得很好。 –

以及爲什麼它們在Google鏈接和鍵= MY_KEY的末尾沒有數字。你不想在這裏發佈它？ –

的谷歌Places API的Web服務並不打算通過AJAX（$http服務）使用，但你可以利用Places Library相反，這裏是角例如：

angular.module('mapApp', []) 
 

 
    .controller('mapCtrl', ['$scope', '$http', function ($scope, $http) { 
 

 
     $scope.map = new google.maps.Map(document.getElementById('map'), { 
 
      center: { lat: 51.503186, lng: -0.126446 }, 
 
      zoom: 15 
 
     }); 
 

 
     $scope.infoWindow = new google.maps.InfoWindow(); 
 
     $scope.service = new google.maps.places.PlacesService($scope.map); 
 

 
     // The idle event is a debounced event, so we can query & listen without 
 
     // throwing too many requests at the server. 
 
     $scope.map.addListener('idle', function() { 
 
      var request = { 
 
       location: {lat: 51.503186, lng: -0.126446}, 
 
       radius: 5000, 
 
       type: ['museum'] 
 
      }; 
 
      $scope.service.radarSearch(request, $scope.processResults); 
 
     }); 
 

 
     $scope.processResults = function (results, status) { 
 
      if (status !== google.maps.places.PlacesServiceStatus.OK) { 
 
       console.error(status); 
 
       return; 
 
      } 
 
      for (var i = 0, result; result = results[i]; i++) { 
 
       $scope.addMarker(result); 
 
      } 
 
     }; 
 

 
     $scope.addMarker = function(place) { 
 
      var marker = new google.maps.Marker({ 
 
       map: $scope.map, 
 
       position: place.geometry.location, 
 
       icon: { 
 
        url: 'http://maps.gstatic.com/mapfiles/circle.png', 
 
        //anchor: new google.maps.Point(16, 16), 
 
        scaledSize: new google.maps.Size(20, 32) 
 
       } 
 
      }); 
 

 
      google.maps.event.addListener(marker, 'click', function() { 
 
       $scope.service.getDetails(place, function (result, status) { 
 
        if (status !== google.maps.places.PlacesServiceStatus.OK) { 
 
         console.error(status); 
 
         return; 
 
        } 
 
        $scope.infoWindow.setContent(result.name); 
 
        $scope.infoWindow.open($scope.map, marker); 
 
       }); 
 
      }); 
 
     } 
 

 

 
    }]);

#map { 
 
     height: 420px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization"></script> 
 
<script src="https://code.angularjs.org/1.3.15/angular.js"></script> 
 

 
<div ng-app="mapApp" ng-controller="mapCtrl" > 
 
    <div id="map"></div> 
 
</div>

來源

2016-08-29 17:08:31

如何做angularjs控制器

回答

相關問題