Question

我正在尝试使用google place api在我的控制器中获取地点：

$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.

顺便说一句，这不是localhost独有的，因为我在实时服务器上尝试过相同的操作。 google angularjs实现这一目标的方法是什么？

Answer 1

Google Places API网络服务不能通过ajax（$http服务）使用，但您可以使用Places Library代替，这里是Angular示例：

＆＃13;

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);
                });
            });
        }


    }]);

＆＃13;

#map {
        height: 420px;
}

＆＃13;

<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>

＆＃13;

如何在angularjs控制器中进行google place api搜索

1 个答案: