如何在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>