Jvectormap very small on div change

问题

I have two divs, one with the world map and one with the US map. When the USA is clicked on the world map I want to hide that div and bring the US map into view.

This works but the map is tiny, even though the position of the zoom buttons indicates the size of the div is how it should be.

Any ideas?

If I have both divs set to "block" from the start they are both the correct size, it's only when invoking code to switch the div that it fails.

onRegionClick: function(event, code){
                        if (code == "US") { openUS('us-map') }
            },

  function openUS(a) {

    document.getElementById("world-map").style.display = 'none';
    document.getElementById(a).style.display = 'block';
  }

回答1:

This issue is caused by the fact that you initialize map on the hidden element, whose size can't be calculated properly at that time. Try to change your logic so that jVectorMap would be initialized after the element becomes visible.

回答2:

You also can add logic to your code that when container of your map appears code executes a method called updateSize. In particular this looks like:

$('$world-map').vectorMap('get','mapObject').updateSize();

回答3:

You can also trigger a resize() on the container of that map after showing it.

I made an example in this post: Switch maps in Jvectormap?

回答4:

I was having the same issue with jVectorMap display sizing and found a way to get them to display properly.

The problem is when you create your map object. For it to display properly, the vectorMap object must be visible when you create it. That being said, when you put them in tabs, you should:

Click first tab.
Create first map.
Click Second tab.
Create Second map.. ..
You can eventually click the first tab again so it's the active one on the page load.

Hope this helps anyone having the same issue.

回答5:

The problem is that the div with the US map is hidden, therefore it cannot calculate the map size (width) correctly. Instead you can css that div to have the height:0.

I encountered this issue using Highcharts, same for jvectormap. Below code fixed the issue (using bootstrap):

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
} 
/* bootstrap hack end */

来源：https://stackoverflow.com/questions/14969023/jvectormap-very-small-on-div-change

标签

jquery

html

jvectormap

world-map