如何在Angular中显示ng-if div中的谷歌地图？

Question

我在Angular（和Ionic）应用程序中显示Google Map。

我在视图中有下面的div，只是为了显示地图，如果它是真的。当我运行这个，我得到一个错误说：“TypeError：无法读取属性'null'offsetWidth'”。我很困惑，因为地图div应该显示，因为它的父div应评估为true。但由于某种原因，它没有显示。

有关如何仅在map_display ='true'时显示地图的任何建议？

<div ng-if="map_display == 'true'"> 
    <div id = "map" data-tap-disabled="true" style = "height:{{heightWidth}}px;"></div> 
</div> 

我的控制器有：

$scope.map_display = 'true'; 

$scope.initialise = function() { 
      var myLatlng = new google.maps.LatLng(37.758446, -122.411789); 
      var markersArray = []; 

      //Initial settings for the map 
      var mapOptions = { 
        center: myLatlng, 
        zoom: 2, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}] 

       }; 

      //Load the initial map 
      var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

      //Event listener to add a marker  
      google.maps.event.addListener(map, 'click', function(e) { 
      clearOverlays(); 
      placeMarker(e.latLng, map); 
      $scope.coordinates = e.latLng; 
      localStorage.userLat = $scope.coordinates.lat(); 
      localStorage.userLong = $scope.coordinates.lng(); 
      }); 

      //Actual function to add a marker 
      function placeMarker(position, map) { 
      var marker = new google.maps.Marker({ 
       position: position, 
       map: map 
      }); 
      map.panTo(position); 
      markersArray.push(marker); 
      } 

      function clearOverlays() { 
      for (var i = 0; i < markersArray.length; i++) { 
       markersArray[i].setMap(null); 
      } 
      markersArray.length = 0; 
      } 

      // $scope.map=map; 

    }; 
    // End of initialise 

    google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise()); 

Answer 1

错误：

Cannot read property 'offsetWidth' of null

在地图div不被网页上呈现被调用初始化函数时，通常会出现。

google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise()); 

尝试替换它：

在你的情况下，它是最有可能与线路相关

google.maps.event.addDomListener(window, 'load', $scope.initialise); 

Also note google.maps.event.addDomListener function accepts for third parameter a function callback, so the proper syntax is $scope.initialise

工作实例

angular.module('myApp', []) 
 
    .controller('MapCtrl', [ 
 
    '$scope', 
 

 
function ($scope) { 
 

 
    $scope.map_display = 'true'; 
 

 
    
 
    $scope.initMap = function() { 
 

 
     var center = new google.maps.LatLng(-33.870501, 151.206704); 
 
     var mapOptions = { 
 
      zoom: 12, 
 
      center: center, 
 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
 
     }; 
 

 
     $scope.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    } 
 
    google.maps.event.addDomListener(window, 'load', $scope.initMap); 
 
}]);

#map-canvas { 
 
      width: 500px; 
 
      height: 500px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
 
    <div ng-app="myApp"> 
 
     <div ng-controller="MapCtrl"> 
 
      <div ng-if="map_display == 'true'"> 
 
       <div id="map-canvas"></div> 
 
      </div> 
 
     </div> 
 
</div>