谷歌地图不加载图像和标记

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 并显示 gmaps 后，它只显示空白的灰色地图，我尝试拖动我的地图来搜索我的标记，它只查看顶部 gmaps 面板的一小部分离开了。

在我调整浏览器大小后，标记最终可以拖动到面板的中心，但仍然是灰色的。

我缩小/缩小并加载了图像，仅在我放大和缩小时才加载图像。

我真的很困惑搜索这么多答案但没有解决我的问题。

请帮帮我..

Answer 1

当地图div，或者它的父级，或者它的父级父级（任何前任）具有display:none 样式时，并且您创建了地图，地图视图将无法正确初始化。您必须在地图上触发 resize 事件才能重新初始化地图视图。

在GMaps 中，google.maps.Map 对象可以使用.map 属性访问，因此您的代码必须如下所示：

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

记得在 div 可见后触发它。为了确保您可以将调整大小触发器置于超时状态，当他们单击要显示的 div 时。

旁注：我不确定您是否知道，但您创建的每张地图都是一个单独的 API 调用，因此拥有多个地图会导致大量单独的 API 调用，如果您没有营业执照的地图，您可以很快达到极限。