javascript - 谷歌 map 在更新时显示灰色叠加

早上好，

我在使用Google Map API时遇到了一些麻烦。

我知道还有其他类似问题的线程。但是他们并没有真正帮助理解我的问题。

我正在yeoman中使用angular-materials在angular.js 1.5 gulp项目中工作，并且需要通过路由器更改标记的地图实现。

例如：我有这样的链接：
http://myurl.de/#/expertise/1
http://myurl.de/#/expertise/2

如果我在新窗口中使用它们，我的地图就可以了。但是，如果我在末尾更改数字，我的地图就会出现那些灰色区域（看起来地图大小未设置为DIV元素的100％）

我的HTML Direktive的实现

<div flex id="GoogleMap" class="google-map" lat="{{expertise.item.map.lat}}" long="{{expertise.item.map.long}}" zoom="{{expertise.item.map.zoom}}"></div>

实现我的地图服务

(function() {
    'use strict';

    angular
        .module('espanioYoNg')
        .service('googleMapService', googleMapService);

    /** @ngInject */
    function googleMapService($window, $q) {
        var deferred = $q.defer();

        // Load Google map API script
        function loadScript() {
            // Use global document since Angular's $document is weak
            var script = document.createElement('script');
            script.src = '//maps.googleapis.com/maps/api/js?key=AIzaSyD42GBUhIFSTDEwcTSsM_xIh07B2RATEB4&sensor=false&language=en&callback=initMap';
            //script.src = '//maps.googleapis.com/maps/api/js?sensor=false&language=en&callback=initMap';

            document.body.appendChild(script);
        }

        // Script loaded callback, send resolve
        $window.initMap = function () {
            deferred.resolve();
        }

        loadScript();

        return deferred.promise;
    }

})();

我的地图指令和控制器

(function() {
    'use strict';

    angular
        .module('espanioYoNg')
        .directive('googleMap', ['googleMapService', googleMap]);

    /** @ngInject */
    function googleMap(googleMapService) {
        return {
            restrict: 'C', // restrict by class name
            scope: {
                mapId: '@id',   // map ID
                lat: '@',       // latitude
                long: '@',      // longitude
                zoom: '@'       // zoom on card
            },
            link: function( $scope, elem ) {

                // Check if latitude and longitude are specified
                if ( angular.isDefined($scope.lat) && angular.isDefined($scope.long) && angular.isDefined($scope.zoom) ) {



                    // Initialize the map
                    $scope.initialize = function() {
                        $scope.location = new google.maps.LatLng($scope.lat, $scope.long);

                        $scope.mapOptions = {
                            zoom: 14, //$scope.zoom,
                            center: $scope.location
                        };

                        $scope.map = new google.maps.Map(document.getElementById($scope.mapId), $scope.mapOptions);

                        new google.maps.Marker({
                            position: $scope.location,
                            map: $scope.map,
                        });
                    }

                    // Loads google map script
                    googleMapService.then(function () {
                        // Promised resolved
                        $scope.initialize();

                    }, function () {
                        // Promise rejected
                    });
                }
            }
        };
    }

})();

我整天都在寻找问题。看起来像CSS，但我不确定。

如有必要，您可以在这里查看：
http://test.espanio.de/#/expertise/1
http://test.espanio.de/#/expertise/2

用户：espanio

通过：oinapse

凭据是临时的，以防止搜索引擎在页面完成之前对其进行爬网。

刷新/重新加载（在Windows上为F5）后，地图应为原样。

我为代码行感到抱歉，但是我并没有在整个项目中都运行这个插件。

谢谢你的帮助，....
来自德国的n00n ...

最佳答案

我认为问题与初始化地图时div的大小有关。当我在新窗口中打开页面并将断点放在$scope.initialize();上时，我可以看到以下内容



现在，如果我在浏览器中更改URL，则可以看到以下内容



注意第二次初始化期间div宽度的变化。我相信您应该在地图完成初始化并更改div大小时触发地图上的resize事件。尝试以下

googleMapService.then(function () {
    // Promised resolved
    $scope.initialize();
    setTimeout(function(){
        google.maps.event.trigger($scope.map, 'resize');
    }, 1000);
}, function () {
    // Promise rejected
});