javascript - 在 angularjs 函数中初始化谷歌地图 api

Question

我正在尝试从函数初始化谷歌地图初始化函数，该函数的工作原理是添加一个新的 div 标签，其中将包含 map 。我尝试在函数内部下面的注释区域中编写代码，但它不起作用，但它在函数外部工作。

app.controller('controller1', function($scope, $http, $window) {

$scope.addMapPanel = function() {

    var ref_div = angular.element(document.querySelector('#ref_div'));

    var map_div = angular.element(document.querySelector('#map_div'));

    if(map_div.length){
        console.log('exist');
    }else{
        console.log('doesnot');
        ref_div.append('<div class="col-md-6" id="map_div"></div>');
    }

    /*$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);*/

  };
});

类似类型的答案:How do I add google map in angular.js controller?

Answer 1

加载该库后，您仍然需要让 DomListener 调用某个函数。从那里，只需检查 div 是否存在。如果没有，您需要附加它，然后初始化一个 map 到该 div 上。

但是，我建议使用 directives 进行 DOM 交互，因为 View 逻辑应该存在于 MVC 架构中。另外，它还允许重复使用。

angular.module('app', []).
controller('mapController', function($scope) {
    $scope.initialize = function () {
      
      var ref_div = angular.element(document.querySelector('#ref_div'));

      var map_div = angular.element(document.querySelector('#map_div'));

      if(map_div.length){
        var map = new google.maps.Map(document.getElementById('map_div'), {
           center: {lat: -34.397, lng: 150.644},
           zoom: 8
        });
      }else{
          ref_div.append('<div class="col-md-6" id="map_div"></div>');
          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);

});

#map_div {
   width: 150px;
   height:  150px;
 }

<div id="ref_div" ng-app="app" ng-controller="mapController">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js">
</script>