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

Google地图未加载图片和标记

1 个答案: