完整的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上運行測試。