Как обновить угловую ui-карту (google-map)

Я скрываю карту изначально с помощью ng-hide. Когда выражение ng-hide выражает значение true, карта отображается неправильно. Это только частично показано, и поведение также странно при перетаскивании. Когда я удаляю атрибут ng-show, карта отображается правильно.Как обновить угловую ui-карту (google-map)

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

}]) ;

источник

2013-11-29 pussmun

я не использовал 'щ-map' сам, но я подозреваю, что проблема с' width'/'height' в Elemen t неправильно вычисляется при отображении карты. Попробуйте использовать 'ng-if' (на Angular 1.2) или' ng-switch' (в более старых версиях), чтобы полностью удалить и воссоздать DOM и посмотреть, разрешает ли она проблему. –

Спасибо, музыкально, но используя ng-if сделал это. – pussmun

Похоже, что ответ решил проблему. Пожалуйста, отметьте его как принятый, чтобы сделать его более понятным для других пользователей. :) –

Использование ng-show просто устанавливает display свойство none, когда объект не должен быть виден. Это возится с вычислениями height/width.

С другой стороны, ng-if (Угловой 1.2) удаляет и воссоздает DOM, заставляя перераспределять height/width. Это должно решить проблему.

источник

2013-12-02 09:34:51

Я обнаружил, что могу использовать что-то вроде '$ timeout(). Then (function() {$ scope.control.refresh();})' inside 'showMap()', но маркеры не будут перерисовываться. 'ng-if' решает обе проблемы – michael

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?

Это решило для меня

источник

2014-04-18 05:44:47 Mawg

У меня есть карта Google на вкладке скрытой, это решение работает для меня, предполагается, что вы ваша карта инициализируются и ссылку с $ 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); 
}

источник

2014-11-10 15:06:56 Hasan

Как обновить угловую ui-карту (google-map)

ответ

Смежные вопросы