谷歌地圖可見地調整負載大小

我使用下面的代碼在div中顯示Google地圖。當頁面加載時，地圖在安置之前似乎會反彈。有沒有辦法阻止這種行爲？該頁面是here。谷歌地圖可見地調整負載大小

function initialize() { 

    myform.search.focus(); 

    geocoder = new google.maps.Geocoder(); 

    var latlng = new google.maps.LatLng(41.850033, -87.6500523); 

    var mapOptions = { 

     zoom: 2, 

     center: latlng, 

     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

}

來源

2013-08-18 Casey

我在Windows上看不到這種行爲。你看到什麼操作系統/瀏覽器？什麼尺寸/分辨率顯示器？ – geocodezip

我在MAC OS（10.8.4）上使用最新版本的Chrome（28.0.1500.95）。這是一個非常快速的調整大小，所以也許你正在使用更快的互聯網？ – Casey

對我來說，以下工作：

最初設置的#map_canvas，可視性風格hidden

然後等待tilesloaded -event顯示地圖（有短暫的延遲）：

google.maps.event 
.addListenerOnce(map, 
        'tilesloaded', 
        function(){var that=this; 
           setTimeout(function(){ 
            that.getDiv().style.visibility='visible'}, 
            100); 
        });

來源

2013-08-18 17:16:26

我試過這個，但無法讓它工作。我是否在初始化函數中添加了這個？我不明白tilesloaded函數如何引用map_canvas來取消隱藏它。 – Casey

在函數結束處的initialize中添加它。 'this'指向一個監聽器，該監聽器將'map'添加到'google.maps.Map'-實例本身，方法'getDiv（）'返回包含地圖的HTML元素（在這種情況下爲#map_canvas） –

Thanks那就是訣竅！我做錯了是使用$（「＃map_canvas」）。hide（）;當我需要在此解決方案的樣式表中更改它時更改可見性。 – Casey

谷歌地圖可見地調整負載大小

回答

相關問題