如何在加載JavaScript後調整Google Map的大小？

104

我有一個'mapwrap'div設置爲400px x 400px，裏面有一個Google'map'設置爲100％x 100％。因此，地圖加載爲400 x 400像素，然後使用JavaScript我將「地圖包裹」調整爲屏幕的100％x 100％ - 谷歌地圖按照我的預期調整到整個屏幕，但瓷磚開始消失之前，右手邊緣頁。如何在加載JavaScript後調整Google Map的大小？

是否有一個簡單的函數，我可以調用它來使Google地圖重新適應更大尺寸的mapwrap div？

來源

2009-04-13 Matthew James Taylor

如果您使用的是Google Maps v2，請在調整容器大小後在地圖上調用checkResize()。 link

來源

2009-04-13 07:36:24 SingleNegationElimination

沃爾夫岡·皮克勒的map-in-a-box要約

加載地圖中可拖動和可調整大小的div元素。

來源

2009-09-23 15:59:37

它看起來像這是v2地圖。原來的海報正在問v3地圖。這兩個API似乎不兼容。 – JoshuaD 2011-03-24 19:17:00

316

谷歌地圖v3，則需要以不同的觸發resize事件：

google.maps.event.trigger(map, "resize");

見resize事件的文件（你需要搜索的單詞「調整」）：http://code.google.com/apis/maps/documentation/v3/reference.html#event

更新

此答案的蜜蜂在這裏很長一段時間，所以一個小小的演示可能是值得的&儘管它使用jQuery，但沒有真正需要這樣做。

$(function() { 
 
    var mapOptions = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(-34.397, 150.644) 
 
    }; 
 
    var map = new google.maps.Map($("#map-canvas")[0], mapOptions); 
 

 
    // listen for the window resize event & trigger Google Maps to update too 
 
    $(window).resize(function() { 
 
    // (the 'map' here is the result of the created 'var map = ...' above) 
 
    google.maps.event.trigger(map, "resize"); 
 
    }); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#map-canvas { 
 
    min-width: 200px; 
 
    width: 50%; 
 
    min-height: 200px; 
 
    height: 80%; 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script> 
 
Google Maps resize demo 
 
<div id="map-canvas"></div>

來源

2010-04-07 04:41:25 cmroanirgo

對於任何使用goMap的人來說，請記住google地圖對象可以在$ .goMap.map – 2012-04-06 18:54:27

處查看[Andrew Hedges這個答案]（http://stackoverflow.com/a/2969091/737393） – CrazyTim 2012-06-20 13:42:29

流行的答案google.maps.event.trigger(map, "resize");沒有爲我單獨工作。

這是一個技巧，確保頁面已加載，並且地圖也已加載。通過設置偵聽器並偵聽地圖的空閒狀態，您可以調用事件觸發器來調整大小。

$(document).ready(function() { 
    google.maps.event.addListener(map, "idle", function(){ 
     google.maps.event.trigger(map, 'resize'); 
    }); 
});

這是我的答案，爲我工作。

來源

2015-07-23 18:48:23 italiansoda

這是最好的，它會完成工作。它將重新調整您的地圖的大小。不再需要檢查元素來重新調整地圖大小。它做什麼會自動觸發重新調整大小事件。

google.maps.event.addListener(map, "idle", function() 
     { 
      google.maps.event.trigger(map, 'resize'); 
     }); 

     map_array[Next].setZoom(map.getZoom() - 1); 
    map_array[Next].setZoom(map.getZoom() + 1);

來源

2016-06-17 08:23:06

首先，感謝您指導我並關閉此問題。我找到了解決這個問題的方法。是的，我們來談談。事情是我在CakePHP3中使用GoogleMapHelper v3助手。當我試圖打開引導模式彈出窗口時，我對地圖上的灰色框問題感到震驚。它已經延長了2天。最後，我解決了這個問題。

我們需要更新GoogleMapHelper來解決該問題

需要添加下面的腳本setCenterMap功能

google.maps.event.trigger({$id}, \"resize\");

並且需要包括下面的代碼在JavaScript

google.maps.event.addListenerOnce({$id}, 'idle', function(){ 
    setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
    {$this->defaultLongitude})); 
});

來源

2017-03-09 07:22:48 user1933951

如何在加載JavaScript後調整Google Map的大小？

回答

相關問題