错误：使用angular-google-maps Places服务时this.j为null

Question

我使用角度为1.5.0的angular-google-maps版本2.3.2。我已经安装了所有地图的依赖项，我可以显示地图，搜索，标记等......

无法以编程方式搜索某个地方，所以这就是我所拥有的：

for app config：

uiGmapGoogleMapApiProvider.configure({
        libraries: 'places' // Required for SearchBox.
    });

视图：

    <section>
    <div>
        <ui-gmap-google-map center='map.center' zoom='18' events="map.events" control="control">
            <ui-gmap-search-box template="map.template"
                                events="map.events"
                                options="map.marker.options">
            </ui-gmap-search-box>
            <ui-gmap-marker coords="map.marker.coords"
                            options="map.marker.options"
                            events="map.events"
                            idkey="map.marker.id">
            </ui-gmap-marker>
        </ui-gmap-google-map>
    </div>
</section>

逻辑：

uiGmapIsReady.promise()
            .then(function() {
                var service = new google.maps.places.PlacesService(scope.control);
                service.textSearch(textSearchRequest, callback);
            });

所以我可以自己创建服务，但是我收到了这个错误：

TypeError: this.j.getElementsByTagName is not a function

但似乎服务已创建：

当我从线上移动调试器时，你可以看到我得到的照片：

    Error: this.j is null
_.t.textSearch/<@https://maps.googleapis.com/maps/api/js?v=3&libraries=places&language=en&callback=onGoogleMapsReady419:129:1328
_.L@https://maps.googleapis.com/maps/api/js?v=3&libraries=places&language=en&callback=onGoogleMapsReady419:50:49
_.t.textSearch@https://maps.googleapis.com/maps/api/js?v=3&libraries=places&language=en&callback=onGoogleMapsReady419:129:1291
createMapModel/<@http://localhost:9000/views/tools/map.srv.js:108:21
processQueue@http://localhost:9000/bower_components/angular/angular.js:15552:28
scheduleProcessQueue/<@http://localhost:9000/bower_components/angular/angular.js:15568:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:9000/bower_components/angular/angular.js:16820:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:9000/bower_components/angular/angular.js:16636:15
$RootScopeProvider/this.$get</Scope.prototype.$evalAsync/<@http://localhost:9000/bower_components/angular/angular.js:16859:15
completeOutstandingRequest@http://localhost:9000/bower_components/angular/angular.js:5804:7
Browser/self.defer/timeoutId<@http://localhost:9000/bower_components/angular/angular.js:6081:7

我使用的是Firefox 44.0.2

你能告诉我出了什么问题或者我错过了什么吗？

谢谢！

Answer 1

我不知道你从哪里得到它，但我不认为你有正确的google.maps对象。尝试注入uiGmapGoogleMapApi服务。所以，你的控制器/服务看起来像这样：

uiGmapGoogleMapApi.then( function(maps) {
  var service = new maps.places.PlacesService(scope.control);
  service.textSearch(textSearchRequest, callback);
});

uiGmapGoogleMapApi是一个解析为google.maps对象的承诺，可用于创建新服务等。

编辑：

要同时获取google.maps对象和地图实例，请尝试此操作。确保您注入$q，uiGmapGoogleMapApi和uiGmapIsReady服务：

$q.all([uiGmapGoogleMapApi, uiGmapIsReady.promise(1)]).then(function(responses) {
  var maps = responses[0];
  var instances = responses[1];
  // If you only have 1 map, this will be the object you want. Otherwise find the right one.
  var mapInstance = instances[0].map;
  var service = new maps.places.PlacesService(mapInstance);
  service.textSearch(textSearchRequest, callback);
});