Google地圖未加載圖像和標記

Question

這是我的gmaps avscript代碼，我打印的地圖與數據數據庫一樣多，這些gmaps位於折疊的div中：

var maps = {!! $maps !!};
var googlemaps = [];

$.each(maps, function( key, item ) {
    googlemaps[key] = new GMaps({
        div: '#gmaps-' + key,
        lat: item.latitude,
        lng: item.longitude,
        width: '100%',
        height: '100%',
    });

    googlemaps[key].addMarker({
        lat: item.latitude,
        lng: item.longitude,
        width: '100px',
        draggable: false,
        title: 'Marker'
    });

    googlemaps[key].setCenter( item.latitude, item.longitude );
    googlemaps[ key ].setZoom( 15 );
});

默認情況下，div是折疊的，打開div並顯示gmap后，它只是顯示空白的灰色地圖，我嘗試拖動地圖以搜索標記，它僅查看gmaps面板左上角的一小部分。

在我調整瀏覽器的大小之后，標記的final可以拖動到面板的中央，但是仍然是灰色的。

我縮小/放大並加載了圖像，僅在放大和縮小時才加載圖像。

我真的很困惑，尋找這么多答案，卻沒有解決我的問題。

請幫我..

Answer 1

如果地圖div或其父級或父級父級（任何前任）具有display:none樣式，並且您創建了地圖，則地圖視圖將無法正確初始化。 您必須在地圖上觸發resize事件，才能重新初始化地圖視圖。

在GMaps ，可以使用.map屬性訪問google.maps.Map對象，因此您的代碼必須如下所示：

google.maps.event.trigger(googlemaps[key].map, "resize");

切記在顯示div之后觸發它。 為了確保您可以在他們單擊div來顯示時將大小調整觸發器設置為超時。

旁注：我不確定您是否知道，但是您創建的每個地圖都是一個單獨的API調用，因此要擁有多個地圖會導致很多單獨的API調用，如果您沒有營業執照的地圖，則可以達到限制快速。