新的 google.maps.places.PlacesService 抛出错误

Question

我正在编写一个使用 Google 地图和地点 api 的 angularjs 应用程序。对于谷歌地图，我使用 angular-google-maps.js 并在应用程序模块中注册为：

app.config(function (uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: appConfig.placesApiKey,
        v: '3',
        libraries:'weather,geometry,visualization,places'
    });
});

在控制器中：

uiGmapGoogleMapApi.then(function (map) {
    $scope.map = { center: { latitude: geocodeObject.latitude, longitude: geocodeObject.longitude }, zoom: 15 };

    var placesService = new google.maps.places.PlacesService(map);
});

在新建位置服务对象时，控制台中会显示以下错误： this.j.getElementsByTagName 不是 places_impl.js 中的函数

由于placesService 为空，我无法再拨打电话。

请提供有关错误操作的任何帮助。

Answer 1

您收到此错误，因为google.maps.places.PlacesService class 的构造函数接受google.maps.Map class 的实例，但uiGmapGoogleMapApi 提供程序返回Google Maps API 类型。

另一方面，uiGmapIsReady 服务更适合初始化google.maps.places.PlacesService class。在uiGmapIsReady 服务的承诺解决之前，地图控件不能保证被初始化。

话虽如此，我建议将google.maps.places.PlacesService class 的初始化放入uiGmapIsReady 服务中：

uiGmapIsReady.promise()                    
.then(function(maps) {                 
    var mapControl = $scope.mapControl.getGMap();
    var placesService = new google.maps.places.PlacesService(mapControl);
});

示例

var app = angular.module('app', ['uiGmapgoogle-maps']);

app.config(function (uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        //key: appConfig.placesApiKey,
        v: '3',
        libraries:'weather,geometry,visualization,places'
    });
});

app.controller('MainCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {

     $scope.mapControl = {};

     uiGmapIsReady.promise()                    
    .then(function(maps) {                 
        var mapControl = $scope.mapControl.getGMap();
        var placesService = new google.maps.places.PlacesService(mapControl);
    });
   
    uiGmapGoogleMapApi.then(function (maps) {
        $scope.map = { center: { latitude: 37.78, longitude: -122.41 }, zoom: 15 };
    });

});

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div ng-app="app">
        <div class="angular-google-map-container" ng-controller="MainCtrl">
            <ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="mapControl">
            </ui-gmap-google-map>
        </div>
</div>

Another example 演示如何使用google.maps.places.PlacesService class。