Leaftlet on Ionic选项卡应用程序只显示第一个磁贴 [英] Leaftlet on Ionic Tabs App shows only first tile

问题描述

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

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

解决方案

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

检查地图容器大小是否改变并更新地图，如果是这样，请在动态更改地图大小后调用它，并在默认情况下动画平移。

< blockquote>

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（）{
 //假设map包含对您的地图实例的引用。 
 map.invalidateSize（）; 
} 
  

如下面的问题海报所述，上述作品，但因此在侦听 $ ionicView.enter 事件并在它的回调中使用 invalidateSize ：

  $ scope。$ on（'$ ionicView.enter'，function（）{
 map.invalidateSize（）; 
}） ; 
  

I have an Ionic Tabs App (I used the Cordova templates on Visual Studio 2015) with a Leaflet map on the second tab. On the first tab I have some search parameters for POIs that I want to show on the map with markers. Everything is working fine, including the map is showing all the tiles, until I start interacting with the controls on the first tab. Specifically, when I enter an input control and the soft keyboard appears, if I then go to the second tab, the map is only showing the first tile. If I zoom in or out, the map refreshes but shows only the first tile. The problem is solved though if I change orientation of the device.

The soft keyboard is not the only thing that causes the problem. On Ripple for example, the soft keyboard does not show (I use the laptop keyboard) but after a while manipulating the search parameters on the first tab, the map stops working properly.

Also, I have tried with the Mapbox API instead of Leaflet and the problem occurs exactly the same way.

解决方案

The L.Map instance is unable to correctly get/calculate it's dimensions because at initialization the instance's parent container has a style of display: none. You can call invalidateSize on your map instance to make it recalculate it's dimensions when the tab containing your map is shown:

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

I'm by far no ionic expert but according to the docs/reference, ion-tab has a on-select callback where you could do this:

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

As mentioned in the comments below by the question poster, the above works, but so does listening for the $ionicView.enter event and using invalidateSize in it's callback:

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

这篇关于Leaftlet on Ionic选项卡应用程序只显示第一个磁贴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！