primefaces中的全高度gmap

Question

我正在使用primefaces ronin主题，我试图制作一个全屏gmap，无论屏幕的分辨率是多少。然而，除非我以像素为单位说明高度，否则它将不起作用。

例如

，如果我将地图的高度css属性设置为100%，它不会显示，如果我用100%高度的div容器包装gmap，它仍然不起作用。如何制作全屏响应式gmap?

Answer 1

您可以通过以下方式显示全屏响应的p:gmap:

假设p:gmap是这样定义的(不需要style属性)

<p:gmap id="gmap" center="41.381542, 2.122893" zoom="13" type="hybrid" />

在你的页面上放置下面的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 resizePfGmapFullScreen() {
                var width = window.innerWidth - 20;
                var height = window.innerHeight - 20;
                resizeElement("gmap", width, height);
            }
            window.onload = function() {
                window.dispatchEvent(new Event('resize'));
            };
            window.onresize = function(event) {
                console.log("Screen is resized");
                resizePfGmapFullScreen();
            };
        </script>

该方案的优点是，当移动设备上的屏幕方向改变时，p:map将自动调整屏幕大小，包括屏幕方向改变。

在最新的Primefaces 6.1版本上进行了测试。