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

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应该由Google Maps API JavaScript文件放在窗口范围内的变量.但是,当没有互联网连接时,Google Maps API JavaScript文件无法加载,因此google窗口范围中没有变量,因此这个<p:gmap>生成的脚本会抛出错误,说明该变量google未定义.

当JavaScript上下文中存在未处理的错误时,JavaScript执行将完全停止.换句话说,其余的脚本,例如其功能严重依赖于JavaScript的其他PrimeFaces用户界面组件的脚本,根本不会被执行.这解释了您对"我的用户界面完全被阻止"的观察.

从技术上讲,解决方案非常简单:<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.googletruthy中的google变量可用时才会调用该函数,即该变量在JavaScript的窗口范围内可用.

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