Ionic Tabs App 上的传单仅第一次显示

Question

我有一个 Ionic Tabs 应用程序（我在 Visual Studio 2015 上使用了 Cordova 模板），第二个选项卡上有一张 Leaflet 地图。在第一个选项卡上，我有一些 POI 的搜索参数，我想用标记在地图上显示这些参数。一切正常，包括地图显示所有图块，直到我开始与第一个选项卡上的控件进行交互。具体来说，当我输入输入控件并出现软键盘时，如果我转到第二个选项卡，则地图仅显示第一个图块。如果我放大或缩小，地图会刷新但只显示第一个图块。如果我改变设备的方向，问题就解决了。

软键盘并不是导致问题的唯一原因。例如，在 Ripple 上，软键盘不显示（我使用笔记本电脑键盘），但在第一个选项卡上操作搜索参数一段时间后，地图停止正常工作。

此外，我尝试使用 Mapbox API 而不是 Leaflet，问题的发生方式完全相同。

Answer 1

L.Map 实例无法正确 get/calculate 它的尺寸，因为在初始化时实例的父容器具有 display: none 的样式。您可以在您的地图实例上调用 invalidateSize 以使其在显示包含您的地图的选项卡时重新计算其尺寸：

Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.

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

到目前为止，我不是离子专家，但根据 docs/reference，ion-tab 有一个 on-select 回调，您可以在其中执行此操作：

Called when this tab is selected.

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

Ionic Tabs App 上的传单仅第一次显示

Leaftlet on Ionic Tabs App shows only first tile

javascript

leaflet

cordova

mapbox

ionic-framework