Leafletjs map - map.invalidateSize is not working

Question

I use Leafletjs with google map tiles in my application. Here is my HTML markup:

                              


        
                      

              相关标签:
       
      

Answer 1

My recommendation for you is to use the following plugin: https://github.com/brunob/leaflet.fullscreen , it adds a button for full screen, which expand the map automatically, as in the following map:.

Answer 2

Thanks Yehoshaphat. I did not want a full screen map. I just wanted to expand the map a little bit.

Finally, I got it working using the below code:

$.expandMap = function()    {
    if ($(".rightNav").is(':visible')){
            $(".map-wrap").animate({width:'70%'},'400');
            $(".rightNav").hide(0);
            setTimeout(function(){ map.invalidateSize()}, 400);
        }
 }

The map now expands to fill the expanded space of the outer container. It is not very smooth; but it works.