Question

我有以下代码使用primefaces显示googlemap。这不是渲染地图。但是，如果我设置style =“width：600px; height：400px”它工作正常。如何在浏览器中获得地图的完整页面视图？

<?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

有两种方式：

1 只需将绝对位置设置为地图：

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

2 您还可以为地图的所有父级设置宽度和高度。

添加：

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

修改您的<h:form>：

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

Answer 2

似乎风格=＆＃34;宽度：100％;高度：100％＆＃34;不渲染地图。我试了一下，然后出现了一个空白页面。但是，您需要在页面高度w.r.t达到平衡。下面呈现的页面的全宽和高度为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 个答案: