javascript - 谷歌地图更新时显示灰色叠加层

Question

早上好，

我在使用 google map api 时遇到了一些严重的麻烦。

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

我正在与 yeoman 一起使用 Angular-Materials 进行 angular.js 1.5 gulp 项目，并且需要一个 map 实现，其中标记通过路由器进行更改。

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

如果我在新窗口中使用它们，我的 map 就很好。但如果我更改最后的数字，我的 map 就会出现这些灰色区域(看起来 map 大小未设置为我的 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>

实现我的 map 服务

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

})();

我的 map 指令和 Controller

(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)后， map 就恢复正常了。

我对代码行感到抱歉，但我没有让 plunker 与我的整个项目一起运行。

感谢您的帮助，...... 来自德国的n00n...

Answer 1

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

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

注意第二次初始化期间 div 宽度的变化。我相信本地图完成初始化并且 div 大小发生变化时，您应该在 map 上触发调整大小事件。尝试以下方法

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