Error: this.j is null while using angular-google-maps Places service

Question

我正在使用 angular-google-maps 版本 2.3.2 和 angular 1.5.0。我已经安装了地图的所有依赖项，并且能够显示地图、进行搜索、标记等...

我需要以编程方式搜索地点，所以这就是我所拥有的：

应用程序配置：

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 服务。所以，你的 controller/service 看起来像这样：

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

Error: this.j is null while using angular-google-maps Places service

Error: this.j is null while using angular-google-maps Places service

angularjs

google-maps

angular-google-maps