传单/Mapbox渲染问题(灰色区域) [英] Leaflet / Mapbox rendering issue (grey area)

问题描述

由于某种原因，我的地图上有一个很大的灰色区域，直到我移动它使其出现为止.

For some reason, my map has a big grey area on it, until I move it which makes it appear.

但是乍看之下，缺少了一部分.以前，我已经在网络上看到了很多东西，但是直到现在为止，我从未想过如何解决它.

But on the first look, there's a part missing. I've seen this quite a lot around the web before but never wondered about how to fix it until now.

这是一个使用MarkerClusterGroup用于集群的简单Mapbox地图.

This is a simple Mapbox map using MarkerClusterGroup for clusters.

这是屏幕截图和页面链接:

Here's a screenshot and the link to the page:

http://vinpin.com/map

所以我想知道，对于这种行为，是否有任何已知的解决方法?

So I was wondering, is there any easy known fix for that kind of behavior?

如果需要，我可以添加代码段.

I can add code snippets if required.

谢谢，祝你有美好的一天！

Thanks and have a nice day!

推荐答案

自初始化以来，地图元素的大小似乎已更改，并且您没有使它无效.

It seems the map element size has changed since the initialization and you did not invalidate it.

您是否更改了可见性(例如display: none样式)，位置(例如后缀中的position: absolute或position: fixed)，还是动态删除了任何HTML元素(使用JS)?也许，您以错误的顺序加载资源，并且在leaflet.js之后加载了样式?或者，也许您更改了边距或填充?这类操作可以隐式更改其他元素的大小，并且Leaflet小程序仅在其旧大小覆盖的区域加载图块.不过，它可以在灰色"区域正确显示已加载的图块，因此您可以向上滚动，然后将填充底部的灰色空间.

Did you change the visibility (eg. display: none style), position (eg. position: absolute or position: fixed like in affix), or removed any HTML element dynamically (with JS)? Perhaps, you are loading the resources in the wrong order and styles are loaded after the leaflet.js? Or, perhaps you changed margins or padding? These kind of operations can change the size of other elements implicitly and the Leaflet applet loads the tiles only for an area covered by its old size. It shows already loaded tiles correctly in this "grey" area, though, so you can scroll up and the grey space at the bottom will be filled then.

在这种情况下，应在Leaflet映射对象上执行 invalidateSize() 方法.

If this is the case, you should execute invalidateSize() method on your Leaflet map object.

这篇关于传单/Mapbox渲染问题(灰色区域)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！