时间戳

首页 > 解决方案 > Angularjs实现谷歌地图没有被渲染

angularjs - Angularjs实现谷歌地图没有被渲染

问题描述

我正在尝试将谷歌地图包含在我的副项目中，但在观看了无数教程后，我似乎不知道为什么这不起作用。我能够解决的一种方法是将 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
            }
        }
      )};
});

标签： angularjsgoogle-maps

解决方案

我没有看到您提到的任何地方ng-controller并ng-init用来调用该方法

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

推荐阅读