Как визуализировать карты в ng-hide div с помощью ngMap, не получая серый прямоугольник

Проблема: элементы Google Maps, которые находятся внутри div, которые изначально отображаются как ng-hidden, отображаются как серые прямоугольники, когда они отображаются ng.

Я собрал этот плункер, чтобы продемонстрировать: https://plnkr.co/edit/emzlIT?p=preview

Другие успешно использовали google.maps.event.trigger(map,'resize'), но для меня это бесполезно, возможно, потому что у меня скрыто несколько карт. На этом плункере 'resize', кажется, имеет значение, но не всегда. Если вы играете с Plunker и кажется, что все работает, попробуйте прокрутить карту, показанную ng, и вы получите серый цвет.

Показанный пример, конечно же, является очень упрощенной версией фактического веб-приложения, над которым я работаю. Достаточно сказать, что использование ng-if вместо ng-show (также работало для других) не вариант, и мои карты не всегда отображаются (хотя, если решения не найдены, мне, возможно, придется думать вне div.)

Примечание. Если вы видите карту серого цвета, увеличение или уменьшение масштаба в браузере, по-видимому, запускает рендеринг, после чего карты работают отлично, даже если они скрыты и снова показаны, я не знаю, что о масштабировании браузера вызывает желаемое поведение, но, возможно, это подсказка для вас.


angularjs ng-show ng-hide ng-map
person jamesthe500    schedule 19.01.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Такое поведение, скорее всего, связано с директивой ng-hide, которая, в свою очередь, добавляет стиль display: none к родительскому элементу. Об этом уже сообщалось (ссылка), что у элемента управления Google Maps есть некоторые проблемы с рендерингом, когда карта находится внутри элемента со стилем display: none.

Я бы предложил заменить директиву ng-hide:

<div ng-hide="div1Hide" class="mapCase">
    <ng-map id="map1" class="map" center="[-33.851371, 151.277736]" zoom-level="18">Parsley</ng-map>
</div>

с, например, директивой ng-class:

<div class="mapCase" ng-style="{'visibility': !div1Hide ? 'visible':'hidden'}">
     <ng-map id="map1" class="map" center="[-33.851371, 151.277736]" zoom-level="18">Parsley</ng-map>
</div>

Измененный планкер

person Vadim Gremyachev    schedule 22.01.2016
comment
Это хорошее решение, хотя для моего фактического кода я использую динамически создаваемые коды скрытия, которые должным образом связаны с ng-hide, но не в стиле ng, поэтому у меня это не работает. Грр. - person jamesthe500; 23.01.2016