Jquery移动检查时没有互联网连接显示错误消息，而不是加载谷歌地图

Jquery mobile check when no internet connection to display error message instead of loading Google maps

本文关键字：消息 谷歌地图 加载 错误 显示 检查 移动 连接 互联网 Jquery      更新时间：2023-09-26

我在过去 2 天中试图实现的是 - 当没有互联网连接时，我可以在我的 jQuery 移动页面上显示一条错误消息"对不起，没有互联网连接"。

我尝试了很多东西，但没有一个奏效。下面的代码现在是我最后一次尝试使用 try-catch 块的时间。但即使这样也无济于事。当我在浏览器中加载页面时，会发生以下情况 -

当互联网连接可用时 - 地图已加载并且工作正常。当没有互联网连接时 - 我得到空白页。没有页眉和页脚。带有一些默认的灰色背景，这对我的应用程序来说看起来很糟糕。:(任何形式的帮助都是可观的。我还在学习。

我现在使用的代码如下 -

 <!DOCTYPE html> 
 <html>
 <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
 <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
 <head>
 <meta charset="utf-8">
  <link rel="stylesheet" href="assets/css/master.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/css/jquery.mobile.structure-1.0.min.css"              type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/css/jquery.mobile.theme-1.0.min.css" type="text/css" media="screen" />
  <script src="assets/js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="assets/js/jquery.mobile-1.0.min.js" type="text/javascript" charset="utf-8">  </script>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <style type="text/css"> 
    #map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px }
  </style>
 </head> 
 <body>
 <div data-role="header" data-theme="e">
 <a data-icon="home" data-iconpos="notext" rel="external" href="index.html#page2"></a>
   <h1>Maps</h1>   
 </div>
 <div data-role="content" data-theme="d">  
  <div id="map_canvas">
   <script type="text/javascript">
     function initialize(){
       try{
            var locations = [
           ['Dr. Martin Luther King Library',37.3356,-121.8853, 4],
           ['Duncan Hall',37.3325,-121.8820, 5],
               ['Clark Hall',37.3360,-121.8827, 3],
               ['Event Center',37.3355,-121.8797, 2],
               ['Student Union',37.3369,-121.8806,  1]
             ];
            var map = new google.maps.Map(document.getElementById('map_canvas'), {
                      zoom: 16,
                      center: new google.maps.LatLng(37.3369,-121.8806),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                   });
            var infowindow = new google.maps.InfoWindow();
            var marker, i;
           for (i = 0; i < locations.length; i++) 
             {  
                marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                     map: map
                });
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                      } 
         })(marker, i));
             }
               }
         catch(err)
           {
             document.getElementById("map_canvas").text='Sorry, No internet connection.';
           }
     }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>  
</div>
</div>
<div data-role="footer" data-theme="e">
 <h4>&copy; blah-blah Inc.</h4>
</div>
</body>
</html>

欢迎任何形式的帮助。

您可以在

iOS 5+和Android 2.2+上使用window.navigator.onLine。

if (window.navigator.onLine) {
    google.maps.event.addDomListener(window, 'load', initialize);
} else {
    document.getElementById("map_canvas").text='Sorry, No internet connection.';
}
这是我

用于PhoneGap/jQuery移动应用程序的代码。

<script type="text/javascript" charset="utf-8" src="js/core/cordova-1.6.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
    // Wait for PhoneGap to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    //
    function onDeviceReady() {
    }
    // alert dialog dismissed
    function alertDismissed() {
        // do something
    }
    function checkReachability() {
        var _check=true;
        var networkState = navigator.network.connection.type;
        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.NONE]     = 'No network connection';
        //alert('Connection type: '+ networkState + states[networkState]);
        if(networkState==="unknown"){
            _check=false;
            showAlert();
            return _check;
        }
        else {
            return true;
        }
    }
    function showAlert() {
        navigator.notification.alert("Please connect your device to Internet.",onDeviceReady,"No Network Connectivity","OK");
    }
</script>

然后放在转到页面的按钮内。像这样：

     <div data-role="content">  
      <ul data-role="listview">
        <li><a href="#MyMapPage" onTouchStart="checkReachability()" data-transition="slide">My Map Page</a></li>
      </ul> 
     </div>

如果没有连接，用户将收到本机警报"请将您的设备连接到互联网"。

相关文章：