如何确保我的应用程序可以在没有互联网连接的情况下与外部库（例如Google Maps）一起使用？

Question

我目前正在使用Ionic框架的版本1开发移动应用程序。 在此应用程序中，我正在使用Google Maps显示地图。 该地图正在使用脚本标签加载，并且在设备连接到互联网时效果很好。 但是，如果该应用程序在没有互联网连接的情况下启动，则该应用程序甚至无法打开。 我怎么解决这个问题？

Answer 1

我不确定在无法加载库时为何Ionic应用程序根本拒绝打开，但是幸运的是可以解决此问题。

TL; DR：您必须异步加载Google Maps，因此请检查是否存在网络连接以及是否加载了库，否则显示错误。

---

有许多示例说明如何异步加载Google Maps库，例如Google的帖子 ，或包含您的问题或此问题 的答案的 问题，其中说明了使用script标签加载和异步加载之间的区别 。 还有一个问题，使用纯JavaScript进行显示 。

现在当然要处理很多文本，因此这里是摘要。 不必在index.html中添加脚本标签，而仅在互联网连接时加载Google Maps库，然后使用JavaScript加载该库。 为了检查有效的Internet连接，您将需要cordova-plugin-network-information ，您可以在此处找到。 您还可以使用ngCordova使其更易于使用此插件，您可以在此处找到文档。

在您的控制器中，您可以执行以下操作：

.controller('MapCtrl', function($state, $scope, $window, $ionicPlatform) {

  // This view event is fired only when the view is loaded for the first time.
  $scope.$on("$ionicView.loaded", function(scopes, states) {
    var isMapLoaded = false;
    var networkState = navigator.connection.type;
    var isOnline = (networkState !== Connection.UNKNOWN && networkState !== Connection.NONE);

    if(isOnline) {
      // If there is a network connection, we load the map.
      var mapsURL = 'https://maps.googleapis.com/maps/api/js?key=[INSERT API KEY HERE]&callback=';

      $window.mapLoaded = function() {
        isMapLoaded = true;
        console.log("The map has been loaded.");
      }

      function loadMapsLibrary(url, callbackFunctionString) {
        var script = document.createElement('script');

        script.type = 'text/javascript';
        script.src = url + callbackFunctionString;

        document.body.appendChild(script);
      }

      $scope.isMapLoaded = isMapLoaded;

      loadMapsLibrary(mapsURL, "mapLoaded");
    } else {
      // It's up to you what you do here, you can show an error for example.
    }

在您看来，您可能必须使用ng-if指令和isMapLoaded值来重新加载包含地图的<div>以确保已加载。 这应该使您基本了解如何使应用重新运行。