传单地图未在手机上正确显示

我有一个页面,上面有过滤器,在平铺视图或地图视图之间切换。

每次更改过滤器时,我都使用AJAX执行搜索,并使用Mustache更改视图。 当我的视图在“平铺”视图上时,我更改了一个过滤器(这样搜索触发器和过滤的平铺就会显示),然后切换到地图视图,它会最大程度地缩小,只有左下角不会变灰。看起来是这样的:

这是地图的HTML持有者:

<div id="map_canvas"></div>

$(document).ready(function(){
    'use strict';

    curr_lang = $('#curr_lang').val();

    initializeElements();

    //Read the query parameters & set everything up according to it
    setupConfig(radiusSlider);
    //Setup the listeners for the freetext input search field
    setupFreetextField();
    setupInterestsField();
    setupLocationField();
    setupDaterangeField();
    setupMorefiltersField();
});

function initializeElements() {
    $(window).scroll(function() {
        var volunteer = $('#map_canvas');
        var offset = volunteer.offset();
        top = offset.top;
        state = $('.footer').offset().top;
        var bottom = $('#map_canvas').offset().top;

        if ($(window).scrollTop() + volunteer.height() + 134 > state) {
            volunteer.removeClass('fixed');
            volunteer.addClass('bottom');
        } else if ($(this).scrollTop() + 58 > bottom) {
            volunteer.addClass('fixed');
            volunteer.removeClass('bottom');
        } else {
            volunteer.removeClass('fixed');
            volunteer.removeClass('bottom');

        }

        //Enable search toggle menu icon
        if ($(window).width() <= 768) {
            var nav = $('.navbar-wrapper');
            var navOffset = nav.offset();

            var filters = $('.content-filters');
            var filtersOffset = filters.offset().top;

            var searchToggle = $('.search-filter-toggle');
            if ($(window).scrollTop() > filters.height()) {
                searchToggle.addClass('show');
            } else {
                searchToggle.removeClass('show');
                filters.removeClass('mobile-filters');
            }
        }
    });

    if ($(window).width() <= 768) {
        $('.search-filter-toggle').on('click',function(e) {
            var filters = $('.content-filters');
            filters.toggleClass('mobile-filters');
        });
    }

    $(window).resize(function() {

        var vacancyGrid = $('.vacancy-holder');
        var mapGrid = $('.map-holder');

        if ($(window).width() > 1227) {
            vacancyGrid.removeClass('hide-mobile');
            mapGrid.removeClass('show-mobile');
            $('#mapview').removeClass('hide-mobile');
            $('#gridview').removeClass('show-mobile');
            $(document.body).removeClass('map');
        }else if($(window).width() < 991){
        }
    });

    $('#mapview').on('click',function(e) {
        map.invalidateSize(false);
        var vacancyGrid = $('.vacancy-holder');
        var mapGrid = $('.map-holder');
        vacancyGrid.addClass('hide-mobile');
        vacancyGrid.removeClass('show-mobile');
        mapGrid.addClass('show-mobile');
        mapGrid.removeClass('hide-mobile');
        $('#mapview').addClass('hide-mobile');
        $('#mapview').removeClass('show-mobile');
        $('#gridview').addClass('show-mobile');
        $('#gridview').removeClass('hide-mobile');
        $(document.body).addClass('map');
        $("html, body").animate({ scrollTop: 0 });
    });

    $('#gridview').on('click',function(e) {
        var vacancyGrid = $('.vacancy-holder');
        var mapGrid = $('.map-holder');
        vacancyGrid.addClass('show-mobile');
        vacancyGrid.removeClass('hide-mobile');
        mapGrid.addClass('hide-mobile');
        mapGrid.removeClass('show-mobile');
        $('#mapview').addClass('show-mobile');
        $('#mapview').removeClass('hide-mobile');
        $('#gridview').addClass('hide-mobile');
        $('#gridview').removeClass('show-mobile');
        $(document.body).removeClass('map');
        $("html, body").animate({ scrollTop: 0 });
    });
}

function setupMap(vacancies) {
    //Destroy the map if it already exists
    if (map != undefined) {
        map.remove();
    }
    console.log("setting up the map...");
    //  this script enable displaying map with markers spiderfying and clustering using leaflet plugin
    var vacArr = [];
    var index = 0;
    if (vacancies.length > 0) {
        for (index = 0; index < vacancies.length; ++index) {
            var vacancy = vacancies[index];
            if (((vacancy.lat != 0) && (vacancy.lat !== undefined) && (vacancy.lat != null)) && ((vacancy.lng !=0) && (vacancy.lng !== undefined) && (vacancy.lat != null))) {
                var vacurl = vacancy.detailurl;
                var tempArr = [];
                tempArr.push(vacancy.lng);
                tempArr.push(vacancy.lat);
                tempArr.push(vacurl);
                tempArr.push(vacancy.name);
                tempArr.push(vacancy.orgname);
                vacArr.push(tempArr);
            }
        }
    }

    var tiles = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="//openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
    });

    map = L.map('map_canvas', {
        center: L.latLng(51.260197, 4.402771),
        zoom: 10,
        layers: [tiles]
    });

    var mcg = L.markerClusterGroup({
        chunkedLoading: true,
        spiderfyOnMaxZoom: true,
        showCoverageOnHover: true //zoomToBoundsOnClick: false
    });

    var boundsarray = [];

    for (var i = 0; i < vacArr.length; i++) {

        var detailText = res.ViewDetail;
        var info ="<div id='infoId-' style=\"background:white\"> <a href=\""+vacArr[i][2] +"\"><h5>"+vacArr[i][3] +"</h5></a> <p class=\"marker_font\">"+vacArr[i][4]+"</p> <a href=\""+vacArr[i][2] +"\">"+detailText+"</a></p></div>";
        var title=vacArr[i][3];
        var marker = L.marker(new L.LatLng(vacArr[i][1], vacArr[i][0]), {
            title: title
        });

        boundsarray.push([vacArr[i][1], vacArr[i][0]]);
        mcg.on('clusterclick', function (a) {

            if('animationend zoom level: ', map.getZoom() >13)
            {
                a.layer.spiderfy();
            }
        });
        marker.bindPopup(info);
        mcg.addLayer(marker);
    }
    //console.log(boundsarray);
    map.fitBounds(boundsarray);
    map.addLayer(mcg);
}

map.invalidateSize(); 在地图切换功能。但结果是一样的。