如何在angular.js控制器中添加google地图？

Question

所以，我对角度很新，并且很难实现谷歌地图API。 我一直收到错误：

Uncaught InvalidValueError: initialize is not a function.

我有这个脚本标签：

<script src="https://maps.googleapis.com/maps/api/js?key=MY API KEY GOES HERE&callback=initialize"
    async defer></script>

但是因为我的函数initialize（）在我的控制器内部，所以它无法识别它。 如果我将该功能放在控制器之外，它就会识别它。 但是因为我在控制器中定义了所有数据，所以我需要它。 我甚至不确定我应该问什么，但我只需要让地图显示出来。 有任何想法吗？

Answer 1

您可以考虑同步加载Google Maps API，如下所示

 angular.module('myApp', []) .controller('MyCtrl', function($scope) { $scope.initialize = function() { var map = new google.maps.Map(document.getElementById('map_div'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } google.maps.event.addDomListener(window, 'load', $scope.initialize); }); 

 html, body { height: 100%; margin: 0; padding: 0; } #map_div { height: 480px; } 

  <script src="https://code.angularjs.org/1.3.15/angular.js"></script> <script src="https://maps.googleapis.com/maps/api/js" ></script> <div ng-app="myApp" ng-controller="MyCtrl"> <div id="map_div"></div> </div> 

Answer 2

您必须阅读此文档并使用简单的googlemap angularjs指令。

我希望这适合你

祝一切顺利