在过去的一周中,我一直在为一个简单的项目实现Google的JavaScript Maps API。到目前为止,我一直没有问题地使用自动完成服务和PlacesService。当添加交互式地图时,由于它的异步特性,我无法始终不加载地图。此后,我开始使用angular-google-maps插件。我没有使用SDK加载器,因为我已经为Autocomplete和PlacesService加载了两次,因此感觉两次加载是多余的。我遵循了非常基本的示例,但是地图不会显示。我检查过的常见错误:


给html,body和map div一个高度。
在不使用angular模块和再次检查API密钥之前,请确保已加载库
使用SDK加载程序时会发生相同的事情,因此我很确定这不是造成此错误的原因。 Autocomplete和PlacesService可以正常工作,因此库在这种情况下可以正常工作。


HTML:

<div class="col-xs-12 col-md-6">
    <div class="row">
        <div class="col-xs-12">
            <div id="map" class="well">
                <ui-gmap-google-map center="map.center"
                                    zoom="map.zoom"
                                    pan="true"
                >
                </ui-gmap-google-map>
            </div>
        </div>
    </div>
</div>


控制器:

angular.module("app").controller("IndexCtrl", ["$scope", "$interval", "uiGmapGoogleMapApi", function($scope, $interval, uiGmapGoogleMapApi) {

    var Autocomplete;
    var PlacesService;

    $(document).ready(function() {
        Autocomplete = new google.maps.places.Autocomplete(document.getElementById("placeInput"), {});
        PlacesService = new google.maps.places.PlacesService(document.getElementById("map"));
    });

    uiGmapGoogleMapApi.then(function(maps) {
        $scope.map = { center: { latitude: 0, longitude: 0 }, zoom: 2 };
        $scope.googleVersion = maps.version;
        maps.visualRefresh = true;

    });

}]);


CSS:

.angular-google-map-container {
    height: 400px;
}

.angular-google-map {
    height: 400px;
}

最佳答案

太棒了通过发布此代码并仅发布罪魁祸首代码,我注意到我将与angular-google-maps模块相同的div用作PlacesService的容器。通过更改此设置,地图可以正常显示。

新控制器:

angular.module("app").controller("IndexCtrl", ["$scope", "$interval", "uiGmapGoogleMapApi", function($scope, $interval, uiGmapGoogleMapApi) {

    var Autocomplete;
    var PlacesService;

    $(document).ready(function() {
        Autocomplete = new google.maps.places.Autocomplete(document.getElementById("placeInput"), {});
        PlacesService = new google.maps.places.PlacesService(document.getElementById("placesContainer"));
    });

    uiGmapGoogleMapApi.then(function(maps) {
        $scope.map = { center: { latitude: 0, longitude: 0 }, zoom: 2 };
        $scope.googleVersion = maps.version;
        maps.visualRefresh = true;

    });

}]);


新的HTML:

<div class="col-xs-12 col-md-6">
    <div class="row">
        <div class="col-xs-12">
            <div id="map"></div>
            <div class="well">
                <ui-gmap-google-map center="map.center"
                                    zoom="map.zoom"
                                    pan="true"
                >
                </ui-gmap-google-map>
            </div>
        </div>
    </div>
</div>

09-28 05:37