Question

我有以下指令：

    .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;
            }
        }
    });
};

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

非常感谢任何帮助。

干杯！

Answer 1

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

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

                }
            });

谷歌地图未在模态AngularJS中第二次加载

1 个答案: