Angularjs 如何将GooglePlacesServices与谷歌地图结合使用

我实例化了一个地图和搜索框，并在搜索完成后删除了一个标记。这是正常工作，但是，我想查询的地方服务，以获得附近的地方，我的标记被删除，我得到了一个错误，当运行：谷歌。地图。地点。地点服务（地图）未捕获类型错误：未定义不是一个函数

下面是一些相关代码 在my Angular.module.config中：

uiGmapGoogleMapApiProvider.configure({
  v: '3.17',
  libraries: 'places'
});

在“我的地图”控制器中：

1） 加载时回调

uiGmapGoogleMapApi.then(function(maps) {
  $scope.googleMapsObject = maps;
});

2） 设置事件处理程序以创建标记

$scope.searchbox = {
  events: {
      places_changed: placesChangedHandler
  }
}

3） 处理位置更改时，为lat设置标记，并（问题是最后一行）查询位置名称

function placesChangedHandler(searchBox) {
  var lat = searchBox.getPlaces()[0].geometry.location.k;
  var lgn = searchBox.getPlaces()[0].geometry.location.C;
  var center = { latitude: lat , longitude: lgn };
  $scope.address = searchBox.getPlaces()[0].adr_address;
  $scope.map = {
    center: center, zoom: 15
  };
  setMarker(center);
  var service = new google.maps.places.PlacesService($scope.googleMapsObject); 
 // service.nearbySearch(request, callback);
}

错误在倒数第二行。（还有，有没有更干净的方法来获取这些变量？）

---

提前感谢您的帮助

我最近也遇到了同样的问题，我花了一些时间才明白问题出在哪里，因为我是angular新手（老实说，我是Java脚本新手；）

在控制器中，您需要添加

$window

依赖项才能访问全局对象

google

。下面是它的外观：

.controller('mapCtrl', ['$scope', '$window', 'uiGmapGoogleMapApi'
    , function($scope, $window, GoogleMapApi) {
  GoogleMapApi.then(function(map) {
    $scope.googleVersion = map.version;
    $scope.map = { center: { latitude: 59.9500, longitude: 10.7500 }, zoom: 11 };
    $scope.googleMapsObject = map

    var service = new $window.google.maps.places.PlacesService($scope.googleMapsObject);
  });
}])

---

我认为问题在于，您正在尝试将places服务加载到“maps”返回值（即google.maps对象）上

因此：

您需要的是使用markers指令（我还没有尝试过），或者转到地图的实际map对象，您可以从tilesLoaded事件中获得该对象

$scope.map = {
   events: {
     tilesloaded: function (map) {
        $scope.$apply(function () {
            $scope.actualMapObj = map;
            $log.info('this is the map instance', map);
        });
     }
   }
}

---

从faq:

加载瓷砖使用“places”作为库进行初始化后，api参数中应该有places属性

uiGmapGoogleMapApi.then（函数（映射）{
maps.places.PlacesService（）/>在这里您可以搜索一些内容
});您找到解决方案了吗？我也处在同样的位置！
$scope.map = {
   events: {
     tilesloaded: function (map) {
        $scope.$apply(function () {
            $scope.actualMapObj = map;
            $log.info('this is the map instance', map);
        });
     }
   }
}