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

时间:2015-01-08 04:33:24

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

我有一个地图和搜索框实例化,并在搜索完成后删除标记。这是正常工作,但是,我想查询地方服务,以获取我的标记被删除附近的地方,我收到一个错误,运行时:google.maps.places.PlacesService(map)未捕获TypeError:undefined不是功能......

以下是一些相关代码 在我的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);
}

错误发生在倒数第二行。 (还有,有更简洁的方法来获取这些变量吗?)

提前感谢您的帮助!

3 个答案:

答案 0 :(得分:0)

我最近遇到了同样的问题,需要时间来理解错误是什么,因为我是棱角分明的新人(说实话,我是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);
  });
}])

答案 1 :(得分:0)

我认为问题是您正在尝试在“地图”返回值(即google.maps对象)上加载地方服务。

这样:

$scope.googleMapsObject == google.maps

你需要的是使用markers指令(我还没试过)或者你可以从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

答案 2 :(得分:0)

使用'places'作为库初始化它之后,你应该在api参数中有places属性

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