AngularJS：通過谷歌地圖API v3在一個選項卡中的地圖

我試圖用選項卡（使用AngularJS）創建一個頁面。在其中一個選項卡中有一張地圖（Google Maps API v3）。當地圖在前臺的標籤中時，一切似乎都沒問題。但是，當地圖加載到背景選項卡中並且只有在單擊該選項卡後纔可見，地圖會錯位/切斷，當您嘗試使用它時，它的功能似乎被破壞了。AngularJS：通過谷歌地圖API v3在一個選項卡中的地圖

我搜索過的解決方案，我發現這些技巧與

google.maps.event.trigger(map, 'resize'); 
map.setCenter(center);

，但它不工作。你能看看http://jsfiddle.net/n4q7Y/5/，告訴我我錯過了什麼嗎？

謝謝。

來源

2013-01-21 honzzz

稍等片刻，你觸發resize -event前：http://jsfiddle.net/doktormolle/aAeZw/

來源

2013-01-21 18:51:28

好的，謝謝:-)這撥弄你的想法也更新加載標記：http://jsfiddle.net/honzzz/n4q7Y/22/ – honzzz

博士.Molle，任何想法爲什麼這是必要的？似乎只是爲了繞過Map模塊的缺陷，導致兩個'$ scope。$ apply's在同一時間發生......因此應該在模塊中修復它，而不是使用超時。 –

I猜猜這個問題是由兩方觀察選定屬性的變化（1.通過'$ scope。$ watch'強制執行，2.通過'ng-show'執行），但是無法控制順序因爲它們是異步調用的。更好的解決方案可能是設置另一個屬性，指示地圖將顯示並觀察此屬性以觸發地圖的調整大小事件：http://jsfiddle.net/doktormolle/6WxtE/ –

謝謝Dr.Molle，如果我能改善這一點，在我的情況沒有延遲$超時完美做的工作（因爲它會等到的$結束消化週期）

$timeout(function() { 
    // in my case 
    initializeMap(); 
    // OR this case: 
    google.maps.event.trigger(map, 'resize');      
}, 1000); // with or without delay

來源

2015-04-01 01:53:43

嘿@Zeev G，是不是沒有延遲工作？沒有延遲的$超時是一個等待角度準備好的技巧。（但它可能是谷歌地圖異步加載，所以它可能比角速度更慢） –

是我的代碼它不工作沒有1000密耳 –

AngularJS：通過谷歌地圖API v3在一個選項卡中的地圖

回答

相關問題