Javascript 谷歌地图更新时显示灰色覆盖图

早上好

我在谷歌地图api上遇到了一些麻烦

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

我正在与yeoman合作一个angular.js 1.5 gulp项目，该项目使用angular材质，需要一个地图实现，其中标记会随着路由器的变化而变化

例如：我得到如下链接：

如果我在新窗口中使用它们，我的地图就会很好。但是如果我在最后更改了数字，我的贴图得到了那些灰色区域，看起来贴图大小没有设置为DIV元素的100%

我的HTML指令的实现

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

我的map指令和控制器

(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，但我不是很确定

如有必要，您可以在此处查看：

用户：espanio

通行证：oinapse

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

在windows上刷新/重新加载F5后，地图将保持原样

我很抱歉代码太多，但是我没有让plunker在我的整个项目中运行

谢谢你的帮助，。。。。

---

德国的n00n…

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

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

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

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

注意在第二次初始化期间div宽度的变化。我认为当映射完成初始化并且div大小更改时，应该在映射上触发一个resize事件。试试下面的方法

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

---

它解决了这个问题，但我不确定超时事件是否是一个好的解决方案。我不能确定一秒钟是否足够。。。也许我会花更多的时间来实施。。。。