Question

在JSF 2.0项目中使用PrimeFaces 2.2.RC2。

我正在尝试使用gmap组件渲染基本的Google Map。没有错误只显示地图所在的空白页。

我的.xhtml文件

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.prime.com.tr/ui">

    <h:head>
        <script src="http://maps.google.com/maps/api/js?sensor=false" 
              type="text/javascript"></script>
    </h:head>
    <h:body>
        <f:view contentType="text/html">
            <h1>Google Map</h1>
            <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBIRD"
                    style="width:600px;height:400px" />
        </f:view>
    </h:body>
</html>

在此项目中没有任何问题让其他PrimeFaces组件呈现，而PrimeFaces网站上的example在我的浏览器中渲染就好了。

有什么想法吗？

更新

我将视图标记更改为<f:view contentType="text/html">，现在我得到了一个灰色方框，地图应该是这样的，当我将鼠标悬停在方框上时，光标会变成白色的手来抓住并移动地图，但仍然没有地图显示。

alt text

Answer 1

您需要将此脚本添加到您的页面：

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>

Answer 2

它需要

<f:view contentType="text/html">才能在Safari / Chrome中使用

我的另一个问题是HYBRID拼写错误，以下作品：

<h1>Google Map 1</h1>
<p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID"
  style="width:600px;height:400px" />

拼写从来都不是我的强项。

Answer 3

这对我有用

<h:head>
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</h:head>
<h:body>
    <f:view contentType="text/html">
        <h1>Google Map</h1>
        <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:600px;height:400px" />
    </f:view>
</h:body>

Answer 4

试试这个：

<h:form>
 <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID"    
 style="width:600px;height:400px" streetView="true"/>
</h:form>

Answer 5

最近，您应该提供一个KEY https://stackoverflow.com/a/38248059/651288

否则您会收到Google Maps API错误：MissingKeyMapError

您可以在此处获取密钥https://developers.google.com/maps/documentation/javascript/get-api-key

PrimeFaces gmap无法渲染

5 个答案: