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

所以，我相当新的角度和艰难的时间实施谷歌地图API。我不断收到错误：如何在angular.js控制器中添加Google地图？

我有这样的脚本标签：

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

但因为我的功能初始化（）是我的控制器内，它不承认它。如果我把这个功能放在控制器之外，它确实可以识别它。但是因为我拥有控制器中定义的所有数据，所以我需要它。我甚至不知道我应该问什么，但我只需要让地图显示出来。有任何想法吗？

来源

2016-04-15 jake

我觉得这是[this]的一个双精度（http://stackoverflow.com/questions/14184956/async-g oogle-maps-api-v3-undefined-is-not-a-function） – rick

你能否用简单的语言解释一下？我读了几次，仍然很难。 – jake

我认为你应该添加几何图形和地方，以便你可以看到地方 –

你可以考虑加载谷歌地图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>

来源

2016-04-15 09:29:01

在这个代码API密钥应该放在哪里？ – AlexP

@AlexP，通过查询字符串，例如：'https://maps.googleapis.com/maps/api/js?key=-YOUR-KEY-GOES-HERE-' –

所以我需要把'\t <脚本src =“https://maps.googleapis.com/maps/api/js?key=myInitialize&callback=initialize”> '进入主页面（包含'

'的那个'？因为我仍然描述了相同的错误这里甚至在实现你的解决方案 – AlexP

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

我希望这对你的作品

一切顺利

来源

2016-04-15 06:58:03

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

回答

相关问题