google-maps - 没有互联网连接时如何阻止gmap

Question

我正在使用PrimeFaces组件gmap，以便能够使用Google Maps服务。它对我来说很好，但是我有一个问题。如果没有互联网连接，我的用户界面将完全被阻止。有没有办法解决这个问题，在没有互联网连接的情况下不渲染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

When there is no internet connection, my user interface totally get blocked

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

Uncaught ReferenceError: google is not defined

In Chrome, you can unfold a stack trace. When you click the first line, it refers to the script generated by <p:gmap> in HTML source as shown below (whitespace manually inserted for readability):

<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用户界面组件的脚本)将根本不会执行。那解释了您对“我的用户界面完全被阻止”的观察。

从技术上讲，解决方案相当简单:当变量 <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为true时(即 google变量在JavaScript的窗口范围中可用)时，才调用该函数。

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