Jvectormap上格变化

很小我有两个div，一个与世界地图和一个与美国地图。当美国在世界地图上点击时，我想隐藏该div并将美国地图显示出来。Jvectormap上格变化

虽然缩放按钮的位置表明div的大小应该是什么，但它可以工作，但地图很小。

enter image description here

任何想法？

如果我从一开始就将div设置为“block”，它们都是正确的大小，它只是在调用代码来切换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'; 
    }

来源

2013-02-19 Dan James Palmer

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

来源

2013-02-20 15:32:55 bjornd

感谢，我给一个去 – 2013-02-20 19:49:54

谢谢你 - 这解决了一个问题，即地图太远到右侧，直到浏览器进行调整。延迟初始化修复它。 – Michael 2014-11-11 23:23:20

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

我在做这个帖子的例子：Switch maps in Jvectormap?

来源

2013-03-03 18:49:40 silenzium

非常感谢！这工作。 – Flov 2016-05-24 05:28:50

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

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

单击第一个选项卡。
创建第一个地图。
单击第二个选项卡。
创建第二张地图.. ..
您最终可以再次单击第一个选项卡，因此它是页面加载中的活动页面。

希望这可以帮助任何人有同样的问题。

来源

2013-05-24 20:47:03 user2418915

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

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

来源

2015-05-05 03:34:54 bootoffav

的问题是，与美国地图在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 */

来源

2016-11-08 11:59:55 fraktal12

Jvectormap上格变化

回答

相关问题