在我的離子應用程序中使用谷歌地圖API的麻煩

Question

有人可以幫我調試我的代碼嗎？我一直在爲此工作好幾天，但卻無法完成工作。谷歌地圖API似乎不適用於我的應用程序。

的index.html：

<link rel="manifest" href="manifest.json"> 

<!-- un-comment this code to enable service worker 
<script> 
    if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('service-worker.js') 
     .then(() => console.log('service worker installed')) 
     .catch(err => console.log('Error', err)); 
    } 
</script>--> 

<!-- compiled css output --> 
<link href="css/ionic.app.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet"> 

<!-- ionic/angularjs js --> 
<script src="lib/ionic/js/ionic.bundle.js"></script> 

<!--GoogleMap--> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTmfHt2k4zLB_0oZxT9JMezlauB2ycKi0&callback=initMap" 
async defer></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="js/controllers.js"></script> 
<script src="js/directives.js"></script> 
<script src="js/routes.js"></script> 

app.js：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.routes', 'starter.directives']) 
.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
if(window.cordova && window.cordova.plugins.Keyboard) { 
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

    cordova.plugins.Keyboard.disableScroll(true); 
} 
if(window.StatusBar) { 
    StatusBar.styleDefault(); 
} 
    }); 
}) 

directives.js：

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

.directive('map', function() { 
    return { 
restrict: 'E', 
scope: { 
    onCreate: '&' 
}, 
link: function ($scope, $element, $attr) { 

    function initMap() { 
    var mapOptions = { 
     center: new google.maps.LatLng(14.5896, 120.979939), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 

    var map = new google.maps.Map($element[0], mapOptions); 

    $scope.onCreate({map: map}); 

    } 

    if (document.readyState === "complete") { 
    initMap(); 
    } else { 
    google.maps.event.addDomListener(window, 'load', initMap); 
    } 
} 
    } 
}); 

個

controller.js：

.controller('mapCtrl', function($scope, $ionicLoading, $compile) { 

    $scope.clickTest = function() { 
alert('Example of infowindow with ng-click') 
    }; 
}) 

map.html

<ion-view title="Maps" id="mapPage" ng-controller="mapCtrl"> 
    <ion-nav-bar class="bar-positive"> 
    </ion-nav-bar> 
    <ion-content padding="true" class="has-header"> 
    <map on-create="mapCreated(map)"></map> 
    </ion-content> 
</ion-view> 

，我已經遇到的錯誤是， '谷歌是未定義' 和initMap不是一個函數。我真的需要幫助。謝謝！

Answer 1

你得到了google is undefined，因爲谷歌地圖腳本在加載時是異步的。

當您在您的指令中調用initMap Google地圖尚未加載。

而您得到的initMap is not a function不是函數，因爲initMap是Google地圖腳本在加載時嘗試調用的回調函數。但它應該是全球定義的並附於window。

.directive('map', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     onCreate: '&' 
    }, 
    link: function ($scope, $element, $attr) { 

     function initMap() { 
      var mapOptions = { 
      center: new google.maps.LatLng(14.5896, 120.979939), 
      zoom: 15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
     }; 

     var map = new google.maps.Map($element[0], mapOptions); 

     $scope.onCreate({map: map}); 

    } 
    window.initMap = initMap; 

}}});