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

Question

我有一个顶部带有过滤器的页面，并且可以在平铺视图或地图视图之间切换。

每次更改过滤器时，我都会使用 AJAX 执行搜索并使用 Mustache 更改视图。 在移动设备上，默认视图是平铺视图，右下角有一个图标来切换地图。 当我的视图位于平铺视图上时，我更改了一个过滤器（因此搜索触发器和过滤后的平铺显示），然后我切换到地图视图，它被最大缩小，并且只有左下角没有变灰。 它看起来像这样：

当我加载页面时，我立即切换到我的地图视图，这也是我看到的初始视图。 但是，如果我随后更改过滤器并再次执行搜索，地图将正确加载并完美运行。 但在切换到图块、更改过滤器并返回地图视图后，它再次中断。

这是地图的 HTML 持有者：

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

jQuery：

$(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(); 关于地图切换功能。 但结果是一样的。 setupMap() 函数在我的 AJAX 成功搜索方法结束时调用。 （空缺参数是我的 AJAX 方法的结果，包含图块的信息以及空缺的纬度/经度）

Answer 1

我遇到了同样的问题（未完成的加载），我用 setTimeout 进行了尝试，它解决了。

setTimeout(function () {   
    if (!myMap)
    loadmap(); /*load map function after ajax is complitly load */   
    }, 1000);

setTimeout(function () { 
     if (myMap)
     myMap.invalidateSize();
      }, 1500);

我希望它有所帮助；

Answer 2

我有一个类似的问题，似乎瓷砖加载，但没有定位。

我发现在 setTimeout 内而不是在地图初始化时加载图块，即使超时时间为零，也是有效的。 例如：

setTimeout(function () {
   tiles.addToMap(map);
},0);

这会延迟瓷砖的渲染足够长的时间，以确保其他脚本不会干扰。

可能来自 CloudFlare 的 mirage 脚本是问题的根源，但我无权更改此站点的 CloudFlare 设置。

请注意，在我的最终实现中，我将所有地图代码都包含在超时中，以免在渲染图块之前出现短暂但明显的延迟。