完整的gmap在primefaces

Question

我使用的是primefaces ronin主题，我试图做一个全屏gmap，无论屏幕的分辨率是多少。除非我用像素表示高度，否则它将无法工作。

例如，如果我将地图的高度css属性设置为100％，它不会显示，如果我用具有100％高度的div容器包装gmap，它仍然不起作用。我怎样才能使全屏响应gmap？

Answer 1

您可以显示一个全屏幕响应号码：在下列方式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上运行测试。