PrimeFaces 对话框中的传单地图不正确渲染答案

【问题标题】：Leaflet map incorrect rendering in PrimeFaces DialogPrimeFaces 对话框中的传单地图不正确渲染
【发布时间】：2019-12-13 13:45:36
【问题描述】：

尝试将Leaflet map 输入PrimeFaces Dialog。我有一个渲染不正确的问题。地图位置不正确，看起来地图相对于 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>

我的对话：

当我在里面移动地图时：

【问题讨论】：

看起来像是缺少 Leaflet CSS 文件的症状。
这能回答你的问题吗？ Vue Leaflet map tiles in wrong order
没有，但是改变了一点结果。但它仍然是不正确的。
当更改浏览器窗口大小（例如：全屏）时，地图再次渲染，然后它看起来没问题
...这是缺少地图容器初始大小的症状，可以使用invalidateSize() 解决，请参阅stackoverflow.com/questions/41742326/…

标签： html css primefaces leaflet

【解决方案1】：

你很可能有两个问题。

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

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

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

...
</p:dialog>

可能会解决问题（免责声明：没有尝试过，手边没有电脑可以尝试）

【讨论】：

【解决方案2】：

这是我的解决方案：

<script type="text/javascript">
       jQuery(document).ready(function ($) {
       mymap.invalidateSize();});
</script>

谢谢你的提示。

【讨论】：