html - PrimeFaces 对话框中的传单地图不正确渲染

Question

尝试将 Leaflet 地图输入 PrimeFaces 对话框。我遇到了渲染不正确的问题。地图位置不正确，看起来地图相对于 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>

我的对话框：

当我在里面移动地图时：

标签： htmlcssprimefacesleaflet

Answer 1

这是我的解决方案：

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

谢谢你的提示。