Javascript Ionic Tabs应用程序上的Leaftlet仅显示第一个磁贴

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

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

---

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

实例的

L.Map

无法正确获取/计算其维度，因为在初始化时，实例的父容器的样式为

显示：none

。当显示包含地图的选项卡时，可以在地图实例上调用

invalidateSize

，使其重新计算其尺寸：

检查贴图容器大小是否更改，如果更改，则更新贴图-在动态更改贴图大小后调用它，默认情况下也会设置平移动画

到目前为止，我还不是离子专家，但根据文档/参考资料，

ion选项卡

有一个

on select

回调，您可以在其中执行以下操作：

选择此选项卡时调用

---

L.Map

实例无法正确获取/计算其维度，因为在初始化时，该实例的父容器的样式为

display:none

。当显示包含地图的选项卡时，可以在地图实例上调用

invalidateSize

，使其重新计算其尺寸：

检查贴图容器大小是否更改，如果更改，则更新贴图-在动态更改贴图大小后调用它，默认情况下也会设置平移动画

到目前为止，我还不是离子专家，但根据文档/参考资料，

ion选项卡

有一个

on select

回调，您可以在其中执行以下操作：

选择此选项卡时调用

---

如果你能添加你想要的结果，那就太好了。试着把它变成一个问题，而不是一个陈述。（-（仅供参考，这个问题出现在我的评论队列中）好的，特雷弗，那么问题是：“当软键盘加载到屏幕上时，如何防止传单地图“遭受”布局更改？”现在它已经被回答并开始工作了！如果你能添加你想要的结果，那就太好了。试着把它变成一个问题，而不是一个陈述。（-：-（仅供参考，这个问题出现在我的评论队列中）好的，特雷弗，那么问题是：“当软键盘加载到屏幕上时，如何防止传单地图“遭受”布局变化？”它现在已经被回答并开始工作了！我也在想同样的事情：D，虽然我没有把它与Ionic结合起来，但我记得：）否则，我们应该把这些问题标记为重复的，并创建一个社区wiki答案。iH8是的，解决了这个问题：-）我用这个代码得到了相同的结果：$scope.$on（'$ionicView.enter'，函数（）{map.invalidateSize（）；}）；好的，谢谢你提供的额外信息：）我将把它添加到我的答案中，完整地说。我也在想同样的事情：D，尽管我记得我没有把它与Ionic结合起来：）否则，我们应该把这些问题标记为重复问题并创建一个社区wiki答案。iH8是的，解决了这个问题：-）我用这段代码得到了相同的结果：$scope.$on（'$ionicView.enter'，function（）{map.invalidateSize（）；}）；好的，谢谢你提供的额外信息：）我将把它添加到我的答案中，作为完整的答案。

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

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

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