आईओनिक फ्रेमवर्क/कॉर्डोवा पर Google मानचित्र एंड्रॉइड बिल्ड

Question

पर काम नहीं कर रहा है मैं उपयोगकर्ता के स्थान को ट्रैक करने और इसे Google मानचित्र का उपयोग करके प्रदर्शित करने के लिए एक ऐप के लिए कोड लिख रहा हूं।

मेरा कोड ब्राउज़र (सफारी, फ़ायरफ़ॉक्स, क्रोम) में पूरी तरह से काम करता है लेकिन मोबाइल (एंड्रॉइड) पर बिल्कुल काम नहीं करता है।

Google मानचित्र एपीआई काम नहीं करता है और नेविगेशन अविश्वसनीय है। मैं एक आयनिक नौसिखिया हूं और इसका परीक्षण करने के लिए एक काफी सरल ऐप लिखा है। इसे कुछ सरल 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()); 


    }); 

GitHub पर सभी कोड देखें। इस मुद्दे पर किसी प्रकार की मदद की सराहना की जाएगी।

मेरी डेवलपर कंसोल पर प्रदर्शित त्रुटि:

ReferenceError: google is not defined 

Answer 1

त्रुटि कहा गया है कि google अनिर्धारित रहता है। मेरे सबसे अच्छे अनुमान लगाने होगा कि index.html से स्क्रिप्ट सही ढंग से लोड नहीं है:

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

मुझे लगता है कि यह प्रयोग किया जा रहा नया Cordova 5.0 रिहाई की वजह से है।

cordova plugin add cordova-plugin-whitelist 

इसके अलावा निम्नलिखित config.xml में जोड़ें:: आप निम्नलिखित के रूप में cordova-plugin-whitelist स्थापित करने की आवश्यकता

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

अंत में करने के लिए निम्न जोड़ने के अपने index.html:

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

कि उपरोक्त रूपरेखाओं के प्रति सचेत रहें ऐसी सेटिंग्स नहीं हैं जिन्हें आप उत्पादन वातावरण में रखना चाहते हैं। अधिक जानने के लिए कृपया cordova-plugin-whitelist के README पर एक नज़र डालें।