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版本上运行测试。

主要表面中的完整高度gmap

1 个答案: