在我的页面上显示传单地图时，我遇到了奇怪的行为。通常，地图按预期呈现并且运行良好。但是我想只在我在javascript中检测到的表单中发生错误时才显示地图。因此，如果我将父<div id="map">设置为display: none;并在以后根据需要显示，则不会加载切片（或仅部分加载并且不会继续），并且地图奇怪地＆＃34;脱臼＆＃ 34; （不是在js中定义的中心）。
我的想法是，浏览器可能无法在display: none;父级内部渲染元素吗？
我尝试使用$(document).ready(...)功能隐藏地图，但没有任何区别。一旦我隐藏并显示地图，相同的行为就会重复。我在Firefox 44.0和Chromium 48.0上进行了测试，行为是一致的。
任何提示都会有所帮助。这是远程加载元素（ajax）的一般行为吗？
现在我知道解决方案和解决方法（请参阅下面的答案），但我仍然不确定这是否是远程加载元素的全局行为？谢谢你的任何解释。
请参阅接受的答案进行解释。
答案 0 :(得分：6)
由于app.post('/signin', function (req, res) {
var email = req.body.email;
var password = req.body.password;
mongoose.model('User').findOne({
email: email,
password: password
}, function (err, user) {
if (err) {
console.log('Database Error');
return res.json({error: 'Database Error'});
}
if (!user) {
console.log('User not found.');
return res.json({error: 'Email and/or password incorrect.'});
}
console.log('User ' + user.email + ' found. Logging in.');
res.json({
token: jwt.sign({}, 'top-secret', {subject: user}),
data: data[user]
});
});
});
CSS规则，您的L.Map实例无法正确计算其维度，因此发生了什么。如果它没有得到适当的尺寸，它不知道要加载多少个瓷砖以及如何铺设它们，它只会加载任何瓷砖。 XHR与它无关。地图不知道XHR是什么，这就是问题所在。
在您从display:none切换到display:none之后，请调用display:block实例上的invalidateSize方法。它将强制地图（重新）渲染：
检查地图容器大小是否已更改并更新地图（如果是这样） - 在您动态更改地图大小后调用它，默认情况下也会动画平移。如果options.pan为false，则不会进行平移。如果options.debounceMoveend为true，它将延迟moveend事件，以便即使连续多次调用该方法也不会经常发生。
答案 1 :(得分：0)
解决方法似乎只是在页面加载后才隐藏地图：
$( window ).load(function () {
$('#map').hide();
});
这样，地图只有在完全渲染后才会被隐藏。在此之后使用$('#map').show();显示一个带有加载图块的地图，您可以预期没有问题。
答案 2 :(得分：0)
另一种解决方法是使用opacity: 0;或height: 0px;代替display: none;