İyonik Çerçeve/Cordova Google Maps üzerinde android yapı üzerinde çalışmıyor

Question

Kullanıcı konumunu izlemek ve Google Maps kullanarak görüntülemek için bir uygulama için kod yazıyor.

Kodum tarayıcılarda mükemmel çalışır (Safari, Firefox, Chrome), ancak mobilde (android) hiç çalışmıyor.

Google maps api çalışmıyor ve gezinme güvenilmez. Ben iyonik bir acemi ve test etmek için oldukça basit bir uygulama yazdım. Bazı basit AngularJS denetleyicisi ile iyonik yan menü şablonu var.

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()); 


    }); 

GitHub. Bu konuda herhangi bir yardım mutluluk duyacağız.

benim geliştirici konsolunda görüntülendiği hatası:

ReferenceError: google is not defined 

Answer 1

Hata google tanımsız olduğunu belirtmektedir. En iyi eğitimli tahminim index.html gelen komut düzgün yüklü değil olurdu:

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

bu kullanılıyor çünkü yeni Cordova 5.0 sürüm olduğunu düşünüyorum.

cordova plugin add cordova-plugin-whitelist 

Ayrıca aşağıdaki config.xml eklemek:: Aşağıdaki şekilde cordova-plugin-whitelist yüklemeniz gerekir

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

Son olarak aşağıdakileri ekleyin index.html:

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

yukarıdaki ayarları unutmayın Bir üretim ortamında olmasını istediğiniz ayarlardır. Daha fazla bilgi için lütfen cordova-plugin-whitelist'un README'una bakın.