css - 素面中的全高 gmap

我正在使用 primefaces ronin 主题，并且无论屏幕的分辨率如何，我都在尝试制作全屏 gmap。但是，除非我以像素为单位说明高度，否则它将不起作用。

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

最佳答案

您可以通过以下方式显示全屏响应 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 版上经过测试。

关于css - 素面中的全高 gmap，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32992993/