如何確保我的應用程序可以在沒有互聯網連接的情況下與外部庫（例如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>以確保已加載。 這應該使您基本了解如何使應用重新運行。