initMap不是google map api中的一个函数,带有angularjs

时间:2017-01-09 11:22:53

标签: angularjs cordova ionic-framework

我正在尝试使用Ionic / angularjs在主页中显示Google地图

我收到此错误

  

initMap不是函数

这是代码

var app = angular.module('starter', ['ionic']);

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) {
 
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

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




app.controller('homeController', function ($ionicPlatform)
{

    $ionicPlatform.ready(function ()
    {

        function initMap() {
            var uluru = {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }
    
    })


})
 <body ng-app="starter" ng-controller="homeController">

      <h3>My Google Maps Demo</h3>
      <div id="map"></div>


      <script async defer
              src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBscOlAy5I1y_LQfnHYxPafZi5Lo0QoK9I&callback=initMap">
      </script>
  
  </body>

注意:它在不使用控制器的情况下工作,但我需要使用控制器显示它。 你能知道这是什么问题吗?

1 个答案:

答案 0 :(得分:0)

不熟悉角度,但这可能有效

**remove callback from script**
<script async defer
              src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBscOlAy5I1y_LQfnHYxPafZi5Lo0QoK9I">
      </script>

现在从控制器调用该功能

app.controller('homeController', function ($ionicPlatform)
{

    $ionicPlatform.ready(function ()
    {

        function initMap() {
            var uluru = {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }

initMap();

    })


})