在Ionic應用上使用$ .getScript加載Google Map Api

我目前正在使用apache cordova，離子和谷歌地圖在web應用上工作。我收到了正確加載谷歌地圖js api的問題。問題是，該應用程序無法在我的設備上工作，但在Ripple上模擬時運行得很好。

所以我有一個離子視圖的控制器，當用戶輸入這個視圖的條件檢查谷歌地圖API加載，如果不是我們加載它，然後開始使用GM Api。我無法確定它出錯的地方。

這裏是打出電話的裝載功能的條件...

$scope.$on('$ionicView.loaded', function() { 
    var test = false; 
    if (test) { 
     alert("Google Map api fully loaded"); 
    } 
    else { 
     alert("Google map api not loaded"); //The alert is fired. 
     $scope.loadApi(); 
    } 

});

裝載功能

$scope.loadApi = function() { 
    if ($cordovaNetwork.isOnline()) //check if device is connected { 

     alert('Loading api'); //The alert is fired 
     $.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&key=xxx', 
     function() { 

      alert("Api Loaded"); //Alert not fired on device 
      $scope.startGeo(); // The function isn't called so no map 

     }); 
    } 
    else { 
     alert('Check your connexion'); 
    } 

};

下面是HTML的一部分，如果我忘了什麼事....

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <meta http-equiv="Content-Script-Type" content="text/javascript"> 

     <title></title> 
     <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
     <link href="css/style.css" rel="stylesheet"> 
     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
     <link href="css/ionic.app.css" rel="stylesheet"> 
     --> 
     <!-- ionic/angularjs js --> 
     <script src="lib/ionic/js/ionic.bundle.js"></script> 

     <!--Google map for Angular--> 

     <script src="lib/angular-google-maps/lodash.min.js"></script> 
     <script src="lib/angular-google-maps/angular-simple-logger.min.js"></script> 
     <script src="lib/angular-google-maps/angular-google-maps.min.js"></script> 
     <script src="lib/localforage/localforage.min.js"></script> 
     <script src="lib/localforage/angular-localForage.min.js"></script> 
     <script src="lib/jquery.js"></script> 

     <script src="lib/ngCordova/dist/ng-cordova.min.js"></script> 
     <!-- cordova script (this will be a 404 during development) --> 
     <script src="cordova.js"></script> 
     <!-- your app's js --> 
     <script src="js/app.js"></script> 
     <!--<script src='https://maps.googleapis.com/maps/api/js?sensor=false&key=xxx'></script>--> 
     <script src="js/controllers.js"></script> 
    </head> 

    <body ng-app="myapp"> 
     <ion-nav-view></ion-nav-view> 
    </body> 
</html>

我試過很多東西，比如用angular-load代替th e的getScript函數通過ajax調用（基本上是同樣的事情），嘗試此answer看看它是否可以幫助..

感謝您的幫助。

來源

2016-05-11 Yoshino

第一個解決方案

通過更換谷歌地圖加載鏈接解決我的問題。

的index.html

安裝了白名單的插件，並在頭說：

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">

取代谷歌地圖加載鏈接：

<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>

擺脫了HTTPS的：來自鏈接。

controller.js

在地圖的控制器：

裝載功能，我由HTTP一個替換https協議。

$scope.loadApi = function() { 
    if ($cordovaNetwork.isOnline()) { 
     console.log($scope.logs.apiLoading); 
     $.getScript('http://maps.googleapis.com/maps/api/js?sensor=false', function() { 
       $scope.startGeo(); 

     }); 
    } 
    else if($cordovaNetwork.isOffline()) { 
     alert($scope.logs.deviceOffline); 
    } 

};

第二個解決方案（使用角谷歌-地圖）

角谷歌地圖的在配置的只是一個提醒app.js

對於使用角谷歌地圖的。該圖書館自動加載谷歌地圖，你只需要正確設置它。還有一個事件可以檢查谷歌地圖是否已加載。當時我並沒有意識到這一點，並混合了一切，谷歌地圖加載過程與我的角度。etcetera :)

angular.module('myapp').config(function (uiGmapGoogleMapApiProvider) { 
    uiGmapGoogleMapApiProvider.configure({ 
     key: 'myKey', 
     v: '3.20', //defaults to latest 3.X anyhow 
     libraries: 'weather,geometry,visualization,places' 
    }); 
})

來源

2016-05-11 15:03:02 Yoshino

在Ionic應用上使用$ .getScript加載Google Map Api

回答

相關問題