Question

早上好，

我在google map api上遇到了一些令人讨厌的麻烦。

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

我正在使用角度材料的angular.js 1.5 gulp项目与yeoman合作，需要一个地图实现，其中标记由路由器改变。

例如：我有这样的链接： 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 ......

Answer 1

我认为这个问题与初始化地图时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
});

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

1 个答案: