AngularJS实现谷歌地图未呈现

时间:2018-06-30 18:09:25

标签: angularjs google-maps

我正在尝试将google maps包含在我的附带项目中,在看了无数教程之后,我似乎不知道为什么这不起作用。我能够解决的一种方法是将src脚本包括在html上的init函数的正下方,然后在控制器文件上,将initMap()函数写在 angular.module('breazehomeDesktop')。controller()。有人可以帮忙吗?

这是我的html

!doctype html>
<html>

<head>
  <!-- Tab Title -->
  <title>Local Scoop</title>
  <!-- Javascript Import-->
  <script src="../scripts/controllers/localscoop.js"></script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY_GOES HERE"></script>
</head>

<body ng-app="breazehomeDesktop" ng-controller="LocalScoopCtrl">
  <!-- MAP -->
  <div id="map" ng-init="initMap()">
    <script>initMap()</script>
  </div>
</body>

</html>

这是我的控制器

angular.module('breazehomeDesktop').controller('LocalScoopCtrl', function($scope, $rootScope, $location, $localStorage, $routeParams, $anchorScroll, $http, Properties, Amenities, Bilingual,toasts,Users,Crime, Map, BASE_URL, IMAGE_URL, ModalService, History) {
    $scope.initMap = function (){
        var map = new google.maps.Map(document.getElementById('map'),{
            zoom:8,
            center: {
                latitude:25.7617,
                longitude:-80.191790
            }
        }
      )};
});

1 个答案:

答案 0 :(得分:0)

我在您提到的任何地方都没有看到 ng-controller ,并使用 ng-init 调用方法

<body ng-app="breazehomeDesktop" ng-controller="LocalScoopCtrl">
 <div id="map" ng-init="initMap()" >
 </div>
相关问题