如何在没有互联网连接时阻止gmap
我使用PrimeFaces组件gmap
,以便能够使用Google地图服务。它适用于我,但我有一个问题。当没有互联网连接时,我的用户界面完全被阻塞。有没有办法解决这个问题,如果没有互联网连接,不要渲染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>
当没有互联网连接,我的用户界面完全被*
这是由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文件的窗口范围内。但是,如果没有互联网连接,那么Google Maps API JavaScript文件无法加载,因此在窗口范围内将不会有google
变量,因此此<p:gmap>
生成的脚本将引发错误,指出变量google
未定义。
当JavaScript上下文中存在未处理的错误时,JavaScript执行将完全停止。换句话说,剩下的脚本,例如其他PrimeFaces用户界面组件,其功能严重依赖于JavaScript,完全不会被执行。这解释了你对“我的用户界面完全被阻止”的观察。
从技术上讲,解决方案非常简单:当变量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
是truthy调用时,即当google
变量是在JavaScript的窗口范围可用。
这应该避免JS错误,并让JS执行继续。
您的用户如何访问您的应用程序?它在Intranet上吗? –
用户通过企业网络访问应用程序 –
您的应用程序是否从同一网络托管? –