如何将 GooglePlacesServices 与 angular-google-maps 一起使用答案

【问题标题】：how to use GooglePlacesServices with angular-google-maps如何将 GooglePlacesServices 与 angular-google-maps 一起使用
【发布时间】：2015-03-06 03:31:27
【问题描述】：

我有一个地图和搜索框实例化并在搜索完成后放置一个标记。这工作正常，但是，我想查询位置服务以获取附近放置我的标记的位置，并且在运行时出现错误：google.maps.places.PlacesService(map) Uncaught TypeError: undefined is not a函数...

下面是一些相关代码在我的 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，(LAST LINE IS THE PROBLEM) 查询地点名称。

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

错误出现在倒数第二行。（另外，有没有更简洁的方法来获取这些变量？）

提前感谢您的帮助！

【问题讨论】：

您找到解决方案了吗？我也是一样的情况！

标签： angularjs google-maps-api-3 angular-google-maps

【解决方案1】：

使用 'places' 作为库对其进行初始化后，您应该在 api 参数中拥有 places 属性

uiGmapGoogleMapApi.then(function(maps) {
  maps.places.PlacesService() // -> here you can search for something
});

【讨论】：

【解决方案2】：

我认为问题在于您试图在“地图”返回值（即 google.maps 对象）上加载地点服务。

所以：

$scope.googleMapsObject == google.maps

您需要的是使用标记指令（我还没有尝试过）或继续为您的地图使用实际的地图对象，您可以从 tilesLoaded 事件中获取。

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

tilesLoaded from faq: http://angular-ui.github.io/angular-google-maps/#!/faq

【讨论】：

【解决方案3】：

我最近遇到了同样的问题，因为我是 Angular 的新手（老实说我是 Java Script 的新手；），所以我花了一些时间才明白出了什么问题。）

在你的控制器中你需要添加$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);
  });
}])

【讨论】：