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

How do I add google map in angular.js controller?

本文关键字：添加 谷歌地图 控制器 js angular      更新时间：2024-07-01

所以，我对angular相当陌生，很难实现googlemap 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（）在我的控制器中，它无法识别它。如果我把函数放在控制器之外，它会识别它。但由于我在控制器中定义了所有数据，我需要它。我甚至不确定我应该问什么，但我只需要得到显示的映射。有什么想法吗？

您可以考虑同步加载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>

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

我希望这对你有效

所有最好的

相关文章：