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

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

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

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

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

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

1 2
angularjs ng-show ng-hide

1 ответ:

Это поведение, скорее всего, связано с директивой 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>

Модифицированный плунжер

2