Question

我想显示一个以gmap为元素的对话框，当我设置高度和宽度时它可以正常工作，但我需要的是将它显示为最大化的全屏地图。对话框以全屏显示，但是地图为空，仅当我回到默认大小时才会显示。

我的代码是

<p:commandLink id="id" value="Modal" onclick="PF('dlg').show(); PF('dlg').toggleMaximize();"/>
<p:dialog appendTo="@(body)" id="dlg" widgetVar="dlg" maximizable="true" width="1920" height="1080">
    <p:gmap id="gmap" center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:100%;"> 
    </p:gmap>
</p:dialog>

如何解决我的问题？

Answer 1

您可以在页面上添加以下JavaScript

<script>
            function resizeElement(elementId,width,height){
                console.log("Resizing element " + elementId + " W/H="+ width + "/" + height);

                var element = document.getElementById(elementId);

                element.style.width=width+"px";
                element.style.height=height+"px"
            }

            function resizePfGmapInsideWrapperElement(wrapperElementId){
                var wrapperElement=document.getElementById(wrapperElementId);
                var width=wrapperElement.clientWidth-40;
                var height=wrapperElement.clientHeight-60;

                resizeElement("gmap",width,height);
            }

            function resizePfGmapInsideDialog(){
                resizePfGmapInsideWrapperElement("dlg");
            }
</script>

然后将resizePfGmapInsideDialog()添加到p:commandLink onclick

<p:commandLink id="id" 
               value="Modal" 
               onclick="PF('dlg').show(); PF('dlg').toggleMaximize(); resizePfGmapInsideDialog();"/>

实际上，每当您致电PF('dlg').toggleMaximize();时，也会立即致电resizePfGmapInsideDialog()，p:gmap会自动调整对话框内容区域内的内容。

在对话框素数中最大化gmap

1 个答案: