javascript - 带有 HighCharts 和 Leaflet 的容器 .fadeIn/Out

Question

所以我有 2 个包装器，一个有一个高图，另一个有一个传单地图。我使用按钮来切换 div 的进出。图表 div 工作正常，但地图一个我必须单击按钮两次才能呈现。我试着放一个setTimer()看看是否有助于过渡，但没有。我有一个小提琴，它说明了我想要做什么，但是这里的地图有问题。我的问题是为什么它不会立即渲染？我该怎么做才能让它立即渲染？谢谢

Answer 1

您正在渲染chartincontainer和 thecontainer两者map，chart因此在渲染chart您的map div移除后container，它会产生问题。

注意：你已经给container id了div两次

替换你的HTML

<div id="maincontainer">
    <div id="chart-wrapper" style="display:block; overflow: auto;">
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
    </div>
  <div id="map-wrapper" style="overflow: auto; display: none;">
        <div id="map-container" style="height: 400px; "></div>
    </div>
</div>


<button id="toggle-btn">Map</button>
<button id="run-btn">run</button>

小提琴http://jsfiddle.net/QBYPH/2/