谷歌地圖不加載第二次模態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

回答

相關問題