Leaftlet on Ionic Tabs App shows only first tile

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/34658773/leaftlet-on-ionic-tabs-app-shows-only-first-tile