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

Leaftlet on Ionic Tabs App shows only first tile

本文关键字：显示 第一个 Leaftlet Tabs 应用 应用程序 程序上 Ionic      更新时间：2023-09-26

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

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

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

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

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

http://leafletjs.com/reference.html#map-无效大小

到目前为止，我还不是离子专家，但根据文档/参考资料，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();
});
相关文章：