如何在 angular.js 控制器中添加谷歌地图？答案

【问题标题】：How do I add google map in angular.js controller?如何在 angular.js 控制器中添加谷歌地图？
【发布时间】：2016-04-15 06:44:41
【问题描述】：

所以，我对 Angular 还很陌生，并且很难实现谷歌地图 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() 在我的控制器内，它无法识别它。如果我将该功能放在控制器之外，它确实可以识别它。但是由于我在控制器中定义了所有数据，所以我需要在其中。我什至不确定我应该问什么，但我只需要显示地图即可。有什么想法吗？

【问题讨论】：

我认为这是this的双倍
您能用更简单的方式解释一下吗？我读了几遍，仍然很难。
我认为您应该添加几何和地点库，以便您可以看到地点

标签： javascript angularjs google-maps

【解决方案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>

【讨论】：

@AlexP，通过查询字符串，例如：https://maps.googleapis.com/maps/api/js?key=-YOUR-KEY-GOES-HERE-
所以我需要将`
@AlexP，没错，但是没有 callback 参数，在我的情况下，一旦页面加载，谷歌地图就会被初始化：google.maps.event.addDomListener(window, 'load', $scope.initialize);
是否可以从 Controller 手动刷新并要求在我需要它而不是在页面加载时加载它？因为我仍然没有效果:(
谢谢。每次我想刷新它时，我都通过分配新的map 来实现我的目标。 $window.map=map; 。你们的 cmets 帮了我很多！

【解决方案2】：

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

我希望这对你有用

一切顺利

【讨论】：