使用 Angular js 加载谷歌地图的问题答案

【问题标题】：Issue loading google map with angular js使用 Angular js 加载谷歌地图的问题
【发布时间】：2014-08-20 02:38:04
【问题描述】：

我正在使用以下 javascript 将谷歌地图加载到我的 angular.js Web 应用程序中。当我在页面上并刷新时，地图工作正常；但是，当我从应用程序中的其他位置链接到页面时，地图不会加载。我相信这与 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>

【问题讨论】：

标签： javascript jquery angularjs google-maps google-maps-api-3

【解决方案1】：

您可以尝试使用ng-init，而不是尝试在load 事件上运行初始化函数

将initialize 函数添加到作用域：

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

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

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

【讨论】：