javascript - 传单地图无法在手机上正确显示
问题描述
我有一个顶部带有过滤器的页面,并且可以在平铺视图或地图视图之间切换。
每次更改过滤器时,我都会使用 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: '© <a href="//openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points © 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 方法的结果,包含图块的信息以及空缺的纬度/经度)
解决方案
我遇到了同样的问题(未完成的加载),我用 setTimeout 进行了尝试,它解决了。
setTimeout(function () {
if (!myMap)
loadmap(); /*load map function after ajax is complitly load */
}, 1000);
setTimeout(function () {
if (myMap)
myMap.invalidateSize();
}, 1500);
我希望它有所帮助;
推荐阅读
- python - 传递 IP 地址列表并获取响应以在 python 中搜索特定关键字
- python - 如何创建多维矩阵作为神经网络的输入?
- c# - FluentFTP中如何选择文件类型?
- javascript - 为什么 React 代码可以正常工作?
- r - 使用 R 函数 simr::powerSim 进行功耗模拟的内存要求非常高
- java - 未找到值或 ?? 插入mysql时
- apache-spark - 结构化流:一次读取多个 Kafka 主题
- reactjs - React 中动态表的渲染模式
- python-3.x - 在python中以某种语言导入字母表的所有字母
- vim - 如何在 Vi 编辑器中从多个页面复制文本