Question

我尝试从函数初始化google maps init函数，函数的工作是添加一个包含地图的新div标记。我尝试在函数下面的注释区域中编写的代码，但它不起作用，但它在函数外部工作。

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是否存在。如果没有，则需要附加它，然后将地图初始化到该div上。

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

＆＃13;

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);

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

在angularjs函数中初始化google map api

1 个答案: