Jvectormap上格变化非常小(Jvectormap very small on div cha

我有两个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:

您也可以显示它后触发该地图的容器上的调整大小（）。

我在这个岗位上做出了一个例子： 切换地图的Jvectormap？

Answer 4:

我是有jVectorMap显示尺寸相同的问题，并找到一种方法，让他们正确显示。

当你创建地图对象的问题。 它才能正常显示，当你创建它的vectorMap对象必须是可见的。 话虽这么说，当你把他们的标签，你应该：

1. 点击第一个选项卡。
2. 创建第一个地图。
3. 点击第二个选项卡。
4. 创建第二个地图..
   您最终可以再次点击第一个选项卡，以便它在页面加载活动之一。

希望这有助于具有相同问题的人。

Answer 5:

问题是，与美国地图在div是隐藏的，因此它不能计算出地图的大小（宽度）正确。 相反，你可以CSS该分区具有高度：0。

我使用Highcharts，同为jvectormap遇到过这个问题。 下面的代码解决了该问题（使用引导程序）：

/* 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 */

文章来源: Jvectormap very small on div change