0

我有以下代码使用 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>
4

2 回答 2

0

有2种方式：

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>
于 2014-01-13T16:05:05.907 回答
0

style="width:100%;height:100%" 似乎没有渲染地图。我试过了，一个空白页来了。但是，您需要平衡页面的高度。下面为页面渲染了全宽和全高 980 px 的地图，几乎覆盖了整个网页。

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

在此处输入图像描述

于 2017-06-19T12:19:38.127 回答