Google Maps su Ionic Framework/Cordova non funziona su Android build

Question

Ho scritto codice per un'app per tracciare la posizione dell'utente e visualizzarla utilizzando Google Maps.

Il mio codice funziona perfettamente nei browser (Safari, Firefox, Chrome) ma non funziona affatto su dispositivi mobili (android).

L'API di google maps non funziona e la navigazione non è affidabile. Sono un principiante ionico e ho scritto un'app abbastanza semplice per provarlo. Ha un modello di menu laterale ionico con un semplice controller AngularJS.

angular.module('starter.controllers', []) 

    .controller('AppCtrl', function($scope, $ionicModal, $timeout) { 

     // With the new view caching in Ionic, Controllers are only called 
     // when they are recreated or on app start, instead of every page change. 
     // To listen for when this page is active (for example, to refresh data), 
     // listen for the $ionicView.enter event: 
     //$scope.$on('$ionicView.enter', function(e) { 
     //}); 

     // Form data for the login modal 
     $scope.loginData = {}; 

     // Create the login modal that we will use later 
     $ionicModal.fromTemplateUrl('templates/login.html', { 
      scope: $scope 
     }).then(function(modal) { 
      $scope.modal = modal; 
     }); 

     // Triggered in the login modal to close it 
     $scope.closeLogin = function() { 
      $scope.modal.hide(); 
     }; 

     // Open the login modal 
     $scope.login = function() { 
      $scope.modal.show(); 
     }; 

     // Perform the login action when the user submits the login form 
     $scope.doLogin = function() { 
      console.log('Doing login', $scope.loginData); 

      // Simulate a login delay. Remove this and replace with your login 
      // code if using a login system 
      $timeout(function() { 
       $scope.closeLogin(); 
      }, 1000); 
     }; 
    }) 

    .controller('PlaylistsCtrl', function($scope) { 
     $scope.playlists = [ 
      { title: 'Reggae', id: 1 }, 
      { title: 'Chill', id: 2 }, 
      { title: 'Dubstep', id: 3 }, 
      { title: 'Indie', id: 4 }, 
      { title: 'Rap', id: 5 }, 
      { title: 'Cowbell', id: 6 } 
     ]; 
    }) 

    .controller('PlaylistCtrl', function($scope, $stateParams) { 
    }) 

    .controller('MapController', function($scope, $ionicLoading) { 
     console.log("MapController"); 
     $scope.initialise = function() { 
      console.log("In Google.maps.event.addDomListener"); 
      var myLatlng = new google.maps.LatLng(37.3000, -120.4833); 
      var mapOptions = { 
       center: myLatlng, 
       zoom: 19, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      console.log(mapOptions); 
      var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

      navigator.geolocation.getCurrentPosition(function(pos) { 
       console.log(pos); 
       map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
       var myLocation = new google.maps.Marker({ 
        position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
        map: map, 
        title: "My Location" 
       }); 
      }); 

      $scope.map = map; 
     }; 
     google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise()); 


    }); 

controllare tutto il codice su GitHub. Qualsiasi aiuto su questo sarebbe apprezzato.

L'errore che visualizza sulla mia console sviluppatore:

ReferenceError: google is not defined 

Answer 1

errore indica che google non è definito. La mia migliore supposizione sarebbe che lo script dalla index.html non è caricata correttamente:

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD4bzp0Ck8nTXgfs9ZYo8vXZ2tgWhqzWmY&sensor=true"> 

Credo che questo sia a causa della nuova release Cordova 5.0 in uso. È necessario installare il cordova-plugin-whitelist come segue:

cordova plugin add cordova-plugin-whitelist 

aggiungere anche quanto segue per config.xml:

<access origin="*" /> 
<allow-navigation href="*" /> 
<allow-intent href="*" /> 

Infine aggiungere il seguente al vostro index.html:

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

essere consapevoli del fatto che le impostazioni di cui sopra non sono le impostazioni che si desidera avere in un ambiente di produzione. Si prega di dare un'occhiata al README del per saperne di più.