Question

您好我正在尝试为一个页面上使用地图的移动设备构建一个有角度的单页应用程序。它还应该包括一个粘性页脚，并基于bootstrap。粘性页脚css干扰了使地图占据所有剩余屏幕空间所需的css，所以我在html元素中添加了一个class ='map'来覆盖某些css元素（见下文）。

一切顺利，直到我去地图页面，离开它然后返回到地图页面。在这种情况下，地图根本无法正常工作。这很难描述，所以请尝试plnkr。

我找到了适用于地图重新加载的CSS，但后来破坏了网站中的其他内容。这让我疯狂地试图将这两种模型结合起来，因此我的呼吁是帮助。

更新：我现在发现调整屏幕大小可以解决渲染问题，直到您离开并返回地图。当然，移动使用不能改变他们的屏幕尺寸，但这可能有助于找到解决方案。

html {
    position: relative;
    min-height: 100%;
}

html.map {
    height: 100%
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.map body {
    /* For Google map */
    height: 100%;
    margin-bottom: 0;
    padding-bottom: 60px;
    padding-top: 60px           
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}

header {
    width: 100%;
    background-color: #ccc;
    height: 60px;
    top: 0;
}

.map header {
    position: absolute;
}

Answer 1

<强>更新

我实施了一个类似于你的解决方案，我在this blog article中找到了解决方案。基本上，您必须触发resize事件，以便在从隐藏变为可见时正确重新绘制地图。

但是我将我的代码放入一个指令而不是一个控制器（不会膨胀控制器并装饰它影响的元素），而不是添加一个只在指令/元素链接后运行的观察者（性能更高），并且它不需要您重新输入坐标以便刷新：

.directive('autoRefresh', function($timeout){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs){
            $timeout(function(){
                var center = scope.map.getCenter();
                google.maps.event.trigger(scope.map, "resize");
                scope.map.setCenter(center);  
            });
        }
    }
})

Updated Plunker

Answer 2

好的，所以我缺少的是触发resize事件。这现在在我的plunker中完美地运行，但在我更复杂的实际代码中还没有。几乎就在那里！

restosApp.controller('mapCtrl', function($scope) {
    $scope.$watch('map', function() {
        google.maps.event.trigger($scope.map, 'resize');
        var ll = new google.maps.LatLng(52.374, 4.899);
        $scope.map.setCenter(ll);
    });
});

AngularJS单页应用：谷歌地图重新加载怪异

2 个答案: