css - Primefaces googlemap 不呈现

标签 css jsf primefaces primefaces-gmap

我有以下代码使用 primefaces 显示 googlemap。这不是渲染 map 。但是,如果我设置 style="width:600px;height:400px"它工作正常。如何在浏览器中获得 map 的完整页面 View ?

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

最佳答案

有两种方式:

1 只需设置 map 的绝对位置即可:

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

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

添加:

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

修改你的<h:form> :

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

关于css - Primefaces googlemap 不呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19580807/

相关文章:

css - SASS:将类附加到 & 运算符

jsf - jftfdi jffi 对我的查询字符串做了什么?

jsf - 使用 p :graphicImage in a tagfile 显示 BLOB 图像

jsf - primefaces文件上传缩图

javascript - 渲染 <p :panel> content by click on expand

css - 使用 Bootstrap 边框类应用边框

jquery - 在 jQuery 中将下拉列表最大高度限制为屏幕高度

java - 网络应用程序 : Delete files during runtime

java - 如何使用 Primefaces 对话框框架打开多个对话框

javascript - 禁用 JSFiddle 中的滚动功能