Primefaces GoogleMap无法呈现

Question

I have the following code to display googlemap using primefaces. 我有以下代码使用素面显示googlemap。 This is not rendering the map. 这不会渲染地图。 However if I set style="width:600px;height:400px" it is working fine. 但是，如果我设置style =“ width：600px; height：400px”，则效果很好。 How do I get a full page view of the map in the browser? 如何在浏览器中获得地图的完整页面视图？

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html" 
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:p="http://primefaces.org/ui">
<h:head>
    <script src="http://maps.google.com/maps/api/js?sensor=false&amp;v=3.4" type="text/javascript"></script>           
</h:head>
    <h:body>
        <f:view contentType="text/html">
            <h:form>
                <p:gmap center="#{loadBean.centerLatitude},#{loadBean.centerLongitude}" style="width:100%;height:100%" zoom="3" type="HYBRID"/>
            </h:form>
        </f:view>
    </h:body>
</html>

Answer 1

There are 2 ways: 有两种方法：

1 Just set absolute position to map: 1只需设置地图的绝对位置即可：

<p:gmap tyle="width:100%;height:100%;position:absolute" center="#{loadBean.centerLatitude},#{loadBean.centerLongitude}" zoom="3" type="HYBRID"/>

2 You can also set the width and height to all the parents of the map. 2您还可以为地图的所有父级设置宽度和高度。

Add: 加：

<style type="text/css">
html, body {
width:100%;
height:100%;
}
</style>

Modify your <h:form> : 修改您的<h:form> ：

<h:form style="width:100%;height:100%">
. . .
</h:form>

Answer 2

It seems to be true that style="width:100%;height:100%" does not render the map. 似乎=“ style =” width：100％; height：100％“不会呈现地图。 I tried it and a blank page comes. 我尝试过，出现空白页。 However, you need to strike balance wrt the height of the page. 但是，您需要平衡页面的高度。 The below renders map with full width and height of 980 px for the page, and almost covers the entire webpage. 下面呈现的页面的全宽和全高为980像素的地图，几乎覆盖了整个网页。

<p:gmap id="gmap" center="36.885233, 30.702323" zoom="13" type="MAP" style="width:100%;height:980px" model="#{addMarkersView.polyLineModel}"
                onPointClick="handlePointClick(event);" widgetVar="map" >
            <p:ajax event="overlaySelect" listener="#{addMarkersView.onPolylineSelect}" update="growl"/>
        </p:gmap>

Primefaces GoogleMap无法呈现

问题描述

2 个解决方案

解决方案1
0 2014-01-13 16:05:05

解决方案2
0 2017-06-19 12:19:38

Primefaces GoogleMap无法呈现

问题描述

2 个解决方案

解决方案1 0 2014-01-13 16:05:05

解决方案2 0 2017-06-19 12:19:38

解决方案1
0 2014-01-13 16:05:05

解决方案2
0 2017-06-19 12:19:38