Leaftlet on Ionic Tabs Приложение показывает только первую плиту

Question

У меня есть приложение Ionic Tabs (я использовал шаблоны Cordova на Visual Studio 2015) с карточкой листов на второй вкладке. На первой вкладке у меня есть некоторые параметры поиска для POI, которые я хочу показать на карте с помощью маркеров. Все работает нормально, в том числе на карте отображаются все плитки, пока я не начну взаимодействовать с элементами управления на первой вкладке. В частности, когда я вхожу в элемент управления ввода и появляется мягкая клавиатура, если я затем перехожу во вторую вкладку, на карте отображается только первая плитка. Если я увеличиваю или уменьшаю масштаб, карта обновляется, но отображается только первая плитка. Проблема решена, хотя если я изменю ориентацию устройства.

Мягкая клавиатура - это не единственное, что вызывает проблему. Например, в Ripple мягкая клавиатура не отображается (я использую клавиатуру ноутбука), но через некоторое время манипулируя параметрами поиска на первой вкладке, карта перестает работать должным образом.

Кроме того, я пробовал API-интерфейс Mapbox вместо Leaflet, и проблема возникает точно так же.

Answer 1

Экземпляр L.Map не может правильно вычислить его размеры, поскольку при инициализации родительский контейнер экземпляра имеет стиль display: none. Вы можете позвонить invalidateSize на вашем экземпляре карты, чтобы сделать его пересчитать это размеры, когда вкладка, содержащая карту показано:

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

http://leafletjs.com/reference.html#map-invalidatesize

Я далеко не эксперт, но ионным по Docs/ссылки, ion-tab имеет on-select обратный вызов, где вы могли бы сделать это:

Вызывается при выборе этой вкладки ,

http://ionicframework.com/docs/api/directive/ionTab/

<ion-tab on-select="onTabSelected()"></ion-tab> 

function onTabSelected() { 
    //Assuming 'map' holds a reference to your map instance. 
    map.invalidateSize(); 
} 

Как уже упоминалось в комментариях ниже по вопросительным плаката, вышеуказанные работы, но так же прослушивание для $ionicView.enter события и используя invalidateSize в это обратный вызов:

$scope.$on('$ionicView.enter', function() { 
    map.invalidateSize(); 
});