Google Maps trên Ionic Framework/Cordova không hoạt động trên android build

Question

Tôi đã viết mã cho ứng dụng để theo dõi vị trí của người dùng và hiển thị nó bằng Google Maps.

Mã của tôi hoạt động hoàn hảo trong các trình duyệt (Safari, Firefox, Chrome) nhưng không hoạt động hoàn toàn trên thiết bị di động (android).

api bản đồ google không hoạt động và điều hướng không đáng tin cậy. Tôi là một người mới chơi nhạc và viết một ứng dụng khá đơn giản để kiểm tra nó. Nó đã có mẫu menu bên ion với một bộ điều khiển AngularJS đơn giản.

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


    }); 

Kiểm tra tất cả mã trên GitHub. Bất kỳ trợ giúp về điều này sẽ được đánh giá cao.

Các lỗi hiển thị trên giao diện điều khiển phát triển của tôi:

ReferenceError: google is not defined 

Answer 1

Lỗi khẳng định rằng google là undefined. Đoán giáo dục tốt nhất của tôi sẽ là kịch bản từ index.html không được tải một cách chính xác:

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

Tôi nghĩ rằng đây là vì mới Cordova 5,0 phát hành đang được sử dụng. Bạn cần phải cài đặt cordova-plugin-whitelist như sau:

cordova plugin add cordova-plugin-whitelist 

Cũng thêm dòng sau vào config.xml:

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

Cuối cùng thêm dòng sau vào bạn index.html:

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

Hãy nhận biết rằng các thiết lập ở trên không phải là cài đặt bạn muốn có trong môi trường sản xuất. Vui lòng xem số README của số cordova-plugin-whitelist để tìm hiểu thêm.