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();后添加了完整的代码。但结果相同。在我的AJAX成功方法的末尾调用setupMap（）函数进行搜索。（vacancies参数是我的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);

我希望能有所帮助；

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

1 个答案: