最大化对话框primefaces中的gmap答案

【问题标题】：Maximize gmap in dialog primefaces最大化对话框primefaces中的gmap
【发布时间】：2016-06-07 21:48:55
【问题描述】：

我想显示一个以 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>

如何解决我的问题？

【问题讨论】：

您的地图是否在对话框可见之前加载？我对谷歌地图有类似的问题。尝试在对话框打开时加载地图（变得可见）。
我猜是这样，但是在我知道之前，jsf中的gmap没有加载功能。

标签： google-maps jsf primefaces dialog

【解决方案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 将自动调整对话框内容区域内的大小。

【讨论】：