Question

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

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

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

Answer 1

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

检查地图容器大小是否更改并更新地图（如果是这样） - 在动态更改地图大小后调用它，默认情况下也为动画设置动画。

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

我目前还不是离子专家，但根据文档/参考文献，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();
});

Ionic Tabs App上的Leaftlet仅显示第一个瓷砖

1 个答案: