如何刷新角度 ui-map (google-map)答案

【问题标题】：How to refresh an angular ui-map (google-map)如何刷新角度 ui-map (google-map)
【发布时间】：2013-12-15 07:53:29
【问题描述】：

我最初使用 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;
}

}]) ;

【问题讨论】：

我自己没有使用过ui-map，但我怀疑问题出在显示地图时元素的width/height 计算不正确。尝试使用 ng-if（在 Angular 1.2 上）或 ng-switch（在旧版本上）来完全删除并重新创建 DOM，看看它是否能解决问题。
谢谢你，musicly_ut，使用 ng-if 做到了。
看来答案解决了问题。请将其标记为已接受，以便其他用户更清楚。 :)

标签： angularjs angular-ui

【解决方案1】：

当对象不应该可见时，使用ng-show 只是将display 属性设置为none。这与height/width 的计算相混淆。

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

【讨论】：

我发现我可以在showMap() 中使用类似$timeout().then(function(){$scope.control.refresh();}) 的东西，但是标记不会重绘。 ng-if 解决了这两个问题

【解决方案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);
}

【讨论】：

【解决方案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?

这帮我解决了

【讨论】：