如何刷新角UI地图（谷歌地图） [英] How to refresh an angular ui-map (google-map)

问题描述

我最初隐藏地图与NG隐藏。当NG隐藏-EX pression计算结果为真，地图不正确显示。它只能部分地显示和行为也在拖怪。
当我删除了NG-show属性的地图显示正确。

HTML

 ＆LT; D​​IV NG控制器=MapCtrl＆GT;
   ＆LT;按钮NG点击=showMap（）＆gt;显示地图＆LT; /按钮＆GT;
   ＆LT; D​​IV NG秀=showMapVar＆GT;
      ＆LT; D​​IV NG重复=标志在myMarkersUI的地图标记=myMarkers [$指数]
       UI事件={}＆GT;
      ＆LT; / DIV＆GT;
      ＆LT; D​​IV ID =map_canvas的UI地图=MYMAP的风格=高度：200像素;宽度：300像素
       UI事件={}UI选项=的MapOptions＆GT;
      ＆LT; / DIV＆GT;
   ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

使用Javascript：

  angular.module（'doc.ui地图'，['ui.map']）
        .controller（'MapCtrl'，['$范围'，函数（$范围）{$ scope.myMarkers = [];$ scope.mapOptions = {
        中心：新google.maps.LatLng（35.784，-78.670）
        变焦：15，
        mapTypeId设为：google.maps.MapTypeId.ROADMAP
}
$ scope.showMap =功能（）{
        $ scope.showMapVar =真;
}}]）;
 

解决方案

使用 NG-节目仅仅设置了显示属性无当对象不应该是可见的。这与高度搞乱 / 宽度计算。

在另一方面， NG-如果（角1.2）移除并重新创建DOM，迫使的重新计算高度 / 宽度。这应该解决这个问题。

I'm hiding the map initially with an ng-hide. When the ng-hide-expression evaluates to true, the map is not shown correctly. It is only partially shown and behaviour is also strange on dragging. When I remove the ng-show attribute the map is shown correctly.

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;
}

}]) ;

解决方案

Using ng-show merely sets the display property to none when the object is not supposed to be visible. This is messing with the height/width calculations.

On the other hand, ng-if (Angular 1.2) removes and re-creates the DOM, forcing a recomputation of the height/width. That should fix the problem.

这篇关于如何刷新角UI地图（谷歌地图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！