Question

我最初使用ng-hide隐藏地图。当ng-hide-expression的计算结果为true时，地图未正确显示。它只是部分显示，拖动时行为也很奇怪。当我删除ng-show属性时，地图会正确显示。

HTML：

<div ng-controller="MapCtrl">
   <button ng-click="showMap()">Show map</button>
   <div ng-show="showMapVar">
      <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
       ui-event="{}">
      </div>
      <div id="map_canvas" ui-map="myMap" style="height:200px;width:300px" 
       ui-event="{}" ui-options="mapOptions">
      </div>
   </div>
</div>

使用Javascript：

angular.module('doc.ui-map', ['ui.map'])
        .controller('MapCtrl', ['$scope', function ($scope) {

$scope.myMarkers = [];

$scope.mapOptions = {
        center: new google.maps.LatLng(35.784, -78.670),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
}
$scope.showMap = function(){
        $scope.showMapVar = true;
}

}]) ;

Answer 1

当对象不可见时，使用ng-show仅将display属性设置为none。这会弄乱height / width计算。

另一方面，ng-if（Angular 1.2）删除并重新创建DOM，强制重新计算height / width。这应该可以解决问题。

Answer 2

我的隐藏标签中有我的谷歌地图，这个解决方案对我有用，假设您已使用$ scope.map初始化并引用了地图：

<div id="googleMap" style="height:600px;" ng-show="resizeMap()"></div>

在您的控制器中：

$scope.resizeMap = function(){
        google.maps.event.trigger($scope.map, 'resize');
        $scope.map.setCenter(0);
}

Answer 3

https://github.com/allenhwkim/angularjs-google-maps/issues/15说

这是因为地图以隐藏状态初始化。所以虽然容器更大，但地图的最小宽度和高度都是

http://plnkr.co/edit/zLl2pJEnLzcq1rm07hLq?p=preview

正如您在plunkr上看到的那样，当地图在可见DOM上初始化时，它具有适当的大小。这就是区别。

如果您想在初始状态下隐藏地图，我建议在显示后重绘地图。这可能有所帮助，How do I force redraw with Google Maps API v3.0?

这为我解决了

如何刷新角度ui-map（谷歌地图）

3 个答案: