关于div更改的Jvectormap非常小

Question

我有两个div，一个是世界地图，另一个是美国地图。当点击世界地图上的美国时，我想要隐藏该div并将美国地图带入视野。

虽然缩放按钮的位置表明div的大小应该是这样的，但是地图很小，但地图很小。

有什么想法吗？

如果我从头开始将两个div设置为“阻塞”，则它们都是正确的大小，只有在调用代码来切换失败的div时才会这样。

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';
  }

Answer 1

此问题是由于您在隐藏元素上初始化地图而导致的，该隐藏元素的大小当时无法正确计算。尝试更改逻辑，以便在元素变为可见后初始化jVectorMap。

Answer 2

您还可以为代码添加逻辑，当您的地图容器出现代码时，会执行名为updateSize的方法。 特别是这看起来像：

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

Answer 3

显示后，您还可以在该地图的容器上触发resize（）。

我在这篇文章中做了一个例子：Switch maps in Jvectormap?

Answer 4

我遇到了与jVectorMap显示大小调整相同的问题，并找到了让它们正常显示的方法。

问题在于您创建地图对象时。为了正确显示，vectorMap对象在创建时必须是可见的。话虽如此，当你把它们放在标签中时，你应该：

1. 点击第一个标签。
2. 制作第一张地图。
3. 点击第二个标签。
4. 创建第二张地图.. ..
   您最终可以再次单击第一个选项卡，这样它就是页面加载中的活动选项卡。

希望这有助于任何人遇到同样的问题。

Answer 5

问题是隐藏了美国地图的div，因此无法正确计算地图大小（宽度）。 相反，你可以css该div具有高度：0。

我使用Highcharts遇到了这个问题，jvectormap也是如此。下面的代码修复了问题（使用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 */