Question

我使用PrimeFaces组件gmap，以便能够使用Google地图服务。它适用于我，但我有一个问题。当没有互联网连接时，我的用户界面完全被阻止。有没有办法解决这个问题，如果没有互联网连接，不渲染gmap？这是我的代码：

<p:gmap id="geoGmap" widgetVar="geoMap" center="#{managedBean.centerGeoMap}" zoom="15" type="ROADMAP" model="#{managedBean.geoModel}" style="width:1000px;height:500px" streetView="false" disableDefaultUI="true"  >
    <p:ajax event="geocode" listener="#{managedBean.onGeocode}" update="@this" />
</p:gmap>

以下是导入它的脚本：

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

Answer 1

当没有互联网连接时，我的用户界面完全被阻止

这是由JavaScript错误引起的。当您在浏览器的开发人员工具集中检查JavaScript控制台时，您可以看到它。按Chrome / FF23 + / IE9 +中的F12进行查看。

Uncaught ReferenceError: google is not defined

在Chrome中，您可以展开堆栈跟踪。当您单击第一行时，它引用由<p:gmap>在HTML源中生成的脚本，如下所示（为了便于阅读，手动插入空格）：

<script id="geoGmap_s" type="text/javascript">
    $(function() {
        PrimeFaces.cw('GMap', 'geoMap', {
            id: 'geoGmap',
            mapTypeId: google.maps.MapTypeId.ROADMAP, // <-- Here,
            center:new google.maps.LatLng(...),       // <-- and here.
            ...
        });
    });
</script>

看，这个内联脚本试图取消引用应该放在Google Maps API JavaScript文件窗口范围内的变量google。但是，如果没有互联网连接，那么Google Maps API JavaScript文件无法加载，因此窗口范围内不会有google变量，因此这个<p:gmap>生成的脚本将会抛出一个错误，说明变量google未定义。

如果JavaScript上下文中出现未处理的错误，那么JavaScript执行将完全停止。换句话说，其余的脚本，例如其功能严重依赖于JavaScript的其他PrimeFaces用户界面组件的脚本，根本不会被执行。这解释了你对我的用户界面完全被阻止的观察＆＃34;。

从技术上讲，解决方案非常简单：当变量<p:gmap>不在窗口范围内时，google不应尝试执行该脚本。

为了实现这一点，您需要扩展<p:gmap>的渲染器GMapRenderer，以便在启动脚本后直接编写if (window.google)：

public class YourGMapRenderer extends GMapRenderer {

    @Override
    protected void startScript(ResponseWriter writer, String clientId) throws IOException {
        super.startScript(writer, clientId);
        writer.write("if(window.google)");
    }

}

要使其运行，请在faces-config.xml中注册，如下所示<renderer-class>表示扩展渲染器类的FQN：

<render-kit>
    <renderer>
        <component-family>org.primefaces.component</component-family>
        <renderer-type>org.primefaces.component.GMapRenderer</renderer-type>
        <renderer-class>com.example.YourGMapRenderer</renderer-class>
    </renderer>
</render-kit>

安装完成后，它将更改渲染的脚本，如下所示：

<script id="geoGmap_s" type="text/javascript">
    if (window.google) $(function() {
        PrimeFaces.cw('GMap', 'geoMap', {
            ...
        });
    });
</script>

换句话说，只有在window.google真实时才会调用该函数，即当google变量在JavaScript的窗口范围内可用时。

这应该避免JS错误并让JS继续执行。

如何在没有互联网连接时阻止gmap

1 个答案: