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调用，如果您没有营业执照的地图，则可以达到限制快速。