Question

我正在使用Semantic UI和ReactJS构建应用程序。我使用tab模块来包含我的地图，它使用Leaflet Javascript库来渲染地图。

问题是在调整页面大小之前，图块无法正确显示。

这就是我的尝试：

MapComponent = React.createClass({
  componentDidMount() {
    let map = L.map('map')
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map)
    map.setView([lat, long], zoom)
    map.invalidateSize(false)
  }
}

这似乎没有解决问题。

我尝试设置超时，如下所示：

MapComponent = React.createClass({
  componentDidMount() {
    let map = L.map('map')
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map)
    Meteor.setTimeout(() => {
      map.invalidateSize(false)
    }, 2000)
    map.setView([lat, long], zoom)
  }
})

有时通过将计时器设置为2000来工作，但有时需要设置为5000，这在我看来有点疯狂。

根据我的阅读，调用invalidateSize()函数应该可以解决问题。任何帮助解决这个问题将不胜感激。谢谢。

Answer 1

一旦包含地图的标签变为可见，请致电invalidateSize。在Semantic UI的选项卡模块中，您可以使用onVisible回调：

来完成此操作

在标签变为可见后调用

http://semantic-ui.com/modules/tab.html#/settings

<div class="ui menu top">
    <a class="item" data-tab="map">Map</a>
</div>

$('.top.menu .item').tab({
    'onVisible': function () {
        // Do stuff
    }
});

ReactJS with Leaflet：在页面刷新之前，瓷砖未正确显示

1 个答案: