html - Leaflet map 在 PrimeFaces 对话框中呈现不正确

Question

尝试将 Leaflet map 输入到 PrimeFaces 对话框中。我有一个渲染不正确的问题。 map 位置不正确，看起来 map 开始定位是相对于 index.html 而不是对话框。下一个问题:尺寸不正确。对话之外的相同代码工作正常。如何改变这个？

<h:head>      
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    </h:head>
    <h:body>
        <ui:composition> 
            <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>           
            <p:dialog  id="map" header="Mapa:" widgetVar="wigetMapDialog" height="800px" width="1200px" showEffect="clip" hideEffect="clip" resizable="false" closable="true" dynamic="true" modal="true">               
                <div id="mapid" style="width: 1180px; height: 780px;"></div>  
                <script>
                    var mymap = L.map('mapid').setView([50.9547215, 16.9126256], 18);
                    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    }).addTo(mymap);
                </script>
            </p:dialog> 
        </ui:composition>
    </h:body>     
</html>

我的对话:

当我在内部移动 map 时:

Answer 1

您很可能有两个问题。

1. 第一个是everything outside a ui:composition is ignored
2. 每个不可见的 (display: none) html 元素都有 no width when retrieved with javascript

第一个问题可以通过在 ui:composition 中添加 css 来解决。第二个，获取不可见 PrimeFaces 的尺寸(在相关渲染的 html 代码中使用 display: none)不是(容易)通过上面链接中提到的方式解决的。许多框架都是这种情况，因此其他框架(如@IvanSanchez 提到的)通常有方法在显示某些内容时重新计算维度。。所以应该在 p:dialog onShow="..." 中调用提到的 invalidateSize() 就像

<p:dialog ... onShow="mymap.invalidateSize()">

...
</p:dialog>

可能会解决问题(免责声明:没试过，手头没有电脑可以试)