谷歌地图没有在模态AngularJS中第二次加载答案

【问题标题】：Google Map Not Loading Second Time In Modal AngularJS谷歌地图没有在模态AngularJS中第二次加载
【发布时间】：2015-12-23 12:57:41
【问题描述】：

我有以下指令：

    .directive('googleMap', function(){
    return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watchCollection('elementChanged', function() {
                var latLng = new google.maps.LatLng(50, 120);
                var mapOptions = { center: latLng , zoom: 12, myTypeId: google.maps.MapTypeId.ROADMAP };
                var map = new google.maps.Map(document.getElementById("map-container"), mapOptions);
                var marker = new google.maps.Marker({ position: latLng , map: map, title: "example" });
                marker.setMap(map);
            });
        }
    };

所以我可以看到第一次选择 elementChanged 时地图正确加载。但是，当它第二次返回时，它不再正确加载。我可以验证 elementChanged 是否在单击时从控制器更新：

$scope.myClickFunction= function (element) {

    $scope.elementChanged = element;

    $modal.open({
        templateUrl: '/partials/myPartialForTheModal.html',
        controller: 'myControllerHandlingThatModal',
        resolve: {
            elementChanged: function() {
                return element;
            }
        }
    });
};

我尝试在每次调用指令时都记录下来，但我认为问题出在地图渲染本身。

非常感谢任何帮助。

干杯！

【问题讨论】：

elementChanged 是否在模态控制器范围内定义？是否正在创建地图但只是不可见？创建一个复制问题的演示。可能需要使用 $modal opened promise 进行调整
我将为它创建一个 Fiddle；它正在显示地图框，但地图本身是灰色的。它甚至出现了谷歌标志，但内容没有更新。页面上的刷新解决了这个问题，因为它会回到地图的第一次加载。 elementChanged 会通过，否则它也不会第一次渲染，对吗？
Modal 不会立即可用，并且可能需要时间来获得一定的大小，尤其是在动画时。我认为可能需要在模式打开后不久调用地图resize
看起来像添加：window.setTimeout(function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(myLatLng); }, 100);它解决了问题并以新的纬度为中心。对吗？
@CarlosTorrecillas - 是的，这是一个异步问题，但使用$timeout，而不是window.timeout。即$timeout(function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(myLatLng); }) 没有时间指示器，您只需强制角度在下一个“摘要”中重新渲染。

标签： angularjs google-maps-api-3 google-maps-markers

【解决方案1】：

我遇到了同样的问题，只需在模态显示后调用调整大小来解决它，在我的情况下，我使用 ngDialog，但是如果您的组件在打开后有任何回调，它就可以工作

            $scope.$on('ngDialog.opened', function(e, $dialog) {
                if (map) {
                    google.maps.event.addListenerOnce(map, 'idle', function() {
                        google.maps.event.trigger(map, 'resize');
                    });

                }
            });

【讨论】：