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

Question

我使用的是PrimeFaces组件gmap，以便能够使用谷歌地图服务。这对我来说很好，但我有一个问题。当没有互联网连接时，我的用户界面完全被阻塞了。有没有办法解决这个问题，在没有互联网连接的情况下不渲染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中，您可以展开堆栈跟踪。点击第一行，指的是HTML源代码中<p:gmap>生成的脚本，如下图所示(为方便阅读，手动插入空白):

<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文件放在窗口范围内。然而，当没有互联网连接时，谷歌地图API JavaScript文件无法加载，因此在窗口范围内不会有google变量，因此这个<p:gmap>生成的脚本将抛出一个错误，说变量google是未定义的。

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

从技术上讲，解决方案相当直接:当变量google不在窗口作用域中时，<p:gmap>不应该尝试执行该脚本。

为了实现这一点，您需要扩展<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继续执行