Question

这是有效的：

<h:panelGroup layout="block" id="map-wrapper">
                <p:gmap center="#{locationService.getLatLngAsString(userSession.location)}"
                        zoom="15"
                        type="HYBRID"
                        model="#{addOfferController.emptyModel}"
                        onPointClick="handlePointClick(event);"
                        style="width:600px;height:400px"/>
            </h:panelGroup>

这不是：

<h:panelGroup layout="block" id="map-wrapper" style="display: none">
                <p:gmap center="#{locationService.getLatLngAsString(userSession.location)}"
                        zoom="15"
                        type="HYBRID"
                        model="#{addOfferController.emptyModel}"
                        onPointClick="handlePointClick(event);"
                        style="width:600px;height:400px"/>
            </h:panelGroup>

在第二个代码中，map-wrapper中只有div具有指定的高度和宽度。

可能是什么原因？

谢谢！

Answer 1

原因是某些PF组件需要维度信息才能在客户端呈现自己。当它们位于具有display: none;的容器中时，经常会出现问题。

我刚刚找到了解决方法：

将widgetVar属性添加到g：map组件widgetVar="gmap"
在同一页面中，添加此javascript <script type="text/javascript">gmap._render();</script>

当style =“display：none”时，Primefaces gmap不会呈现

1 个答案: