Mapbox Gl JS 调整大小问题

Question

当我有很多元素/标记要加载时，我在调整地图大小时遇到了问题。调整大小似乎被阻止并且地图具有那种视图：

地图的名称如下：

map.on('load', () => {

            // const bounds = new mapboxgl.LngLatBounds();
            var group = [];
            map.addControl(new mapboxgl.NavigationControl(
                { showCompass: false }
            ));

            // Refresh map info on : Zoom
            map.on('zoomend', (e) => {
                // Launch the action only on human zoom not an automatic zoom (teh zoom of the beginning)
                if (typeof e.originalEvent !== 'undefined') {
                    refreshSearchResultOnMapAct(map);
                }
            });

            // Refresh map info on : Drag
            map.on('dragend', () => {
                refreshSearchResultOnMapAct(map);
            });

            // Add markers to the map.
            for (const marker of geojson.features) {
                // Create a DOM button for each marker.
                const button = document.createElement('button');
                // Button style depending on type_estate.
                if (marker.properties.type === 'habitation') {
                    button.className = 'btn map__price';
                    button.prepend(marker.properties.price);
                } else {
                    // IE style.
                    button.className = 'btn map__point';
                }

                // Action for markers click
                button.addEventListener('click', () => {
                    $.ajax({
                        type: "POST",
                        url: my_ajax_object.ajaxurl,
                        data: {
                            action: 'show_modal_map_item',
                            id: marker.properties.id_estate,
                        }
                    }).done(function (response) {
                        $('.js-map-card').html(response.data);
                        $('.js-map-card-wrapper').removeClass('is-hidden')

                        $(document).on('click', '.js-map-card__close', function () {
                            $('.js-map-card').html();
                            $('.js-map-card-wrapper').addClass('is-hidden')
                        });
                    })
                });

                group.push(marker.geometry.coordinates)
                // Add markers to the map.
                let map_points = new mapboxgl.Marker(button)
                    .setLngLat(marker.geometry.coordinates)
                    .addTo(map);

                // Push the map markers(map_points) inside markers array
                markers.push(map_points);
            }
            // Zoom on markers
            var bounds = group.reduce(function (bounds, coord) {
                return bounds.extend(coord);
            }, new mapboxgl.LngLatBounds(group[0], group[0]));

            map.fitBounds(bounds, { padding: 20 });
            map.resize();
        });

ajax 成功后，它在一个函数中。当用户提交搜索表单时触发哪个。 每个标记都来自提供地理定位点的弹性搜索结果。

谢谢

Answer 1

这可能有帮助：

// Refresh map info on : Drag
map.on('dragend', () => {
  window.setTimeout(() => {
    refreshSearchResultOnMapAct(map)
  }, 0);
});

为 Mapbox 提供一些处理器容量来更新地图，然后（0 毫秒但将其放在 UI 处理队列的末尾）放置来自 api 响应的新接收标记。