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>

我遇到的错误是谷歌未定义＆＃39;和initMap不是一个函数。我真的需要帮助。谢谢！

Answer 1

您获得google is undefined，因为Google地图脚本是异步加载的。

当您在指令中致电initMap时，尚未加载Google地图。

而且initMap is not a function不是函数，因为initMap是Google Maps脚本在加载时尝试调用的回调。但它应该是全局定义并附加到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;

}}});

麻烦在我的离子应用程序中使用谷歌地图API

1 个答案: