谷歌地图不加载第二次模态AngularJS

我有以下指令：谷歌地图不加载第二次模态AngularJS

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

我试图登录每次指令被调用，这样做，但我认为这个问题是在地图渲染本身。

任何帮助，非常感谢。

干杯！

来源

2015-09-25 Carlos Torrecillas

是'在模态控制器范围中定义的elementChanged？地图是否被创建，但只是不可见？创建一个复制问题的演示。可能需要使用$ modal'opened'做出调整 – charlietfl

我会为它创建一个小提琴;它显示地图框架，但地图本身是灰色的。它甚至会出现Google徽标，但它是未更新的内容。页面上的刷新修复了问题，因为它会返回到地图的第一次加载。 elementChanged获得通过，否则它不会渲染第一次，是吗？ –

莫代尔将不会立即可用，需要时间来获得一些大小，特别是在动画时。我认为可能需要在模式打开后不久调用地图'resize' – charlietfl

我有同样的问题，只是通过调用大小调整解决它的模式显示出来后，在我来说，我使用ngDialog，但如果你的组件后，打开有任何回调它的工作

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

       } 
      });

来源

2017-01-19 01:10:16

谷歌地图不加载第二次模态AngularJS

回答

相关问题