javascript - 使用 Angular js 加载谷歌地图

Question

我正在使用以下 javascript 将谷歌地图加载到我的 angular.js 网络应用程序中。当我在页面上并刷新时， map 工作正常；但是，当我从应用程序中的其他地方链接到页面时， map 不会加载。我相信这与 DOM 监听器没有注册“加载”事件有关，但是我不确定。我将不胜感激帮助解决这个问题。

authApp.controller('BarsController', function($scope, $rootScope, BarService) {
  $scope.currentUser = Parse.User.current();
  $scope.title = $rootScope.title;

  function initialize(){
      var mapOptions = {
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

      $scope.map = map;
      if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
              var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

              $scope.map.setCenter(pos);

              //Set myLocation Pin
              var marker = new google.maps.Marker({
                  position: pos,
                  map: $scope.map,
                  title: 'My Location',
                  icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
              });

          }), function(error){
            console.log('Unable to get location: ' + error.message);
          };
      }
   }; 
   google.maps.event.addDomListener(window, 'load', initialize);
 });  

DMullings 提供的解决方案:

 authApp.controller('BarsController', function($scope, $rootScope, BarService) {
  $scope.currentUser = Parse.User.current();
  $scope.title = $rootScope.title;

  $scope.initialize = function(){
      var mapOptions = {
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

      $scope.map = map;
      if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
              var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

              $scope.map.setCenter(pos);

              //Set myLocation Pin
              var marker = new google.maps.Marker({
                  position: pos,
                  map: $scope.map,
                  title: 'My Location',
                  icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
              });

          }), function(error){
            console.log('Unable to get location: ' + error.message);
          };
      }
   }; 
 }); 

HTML:

<div data-ng-controller="BarsController" data-ng-init="initialize()">   
  //HTML Content Here
</div>  

Answer 1

与其尝试在 load 事件上运行初始化函数，不如尝试使用 ng-init

将initialize 函数添加到作用域中:

$scope.initialize = function(){
    //code goes here
}; 

然后在controller被angular初始化的时候调用initialize函数

<div data-ng-controller="BarsController" data-ng-init="initialize()"></div>