javascript - 最初隐藏显示对象时，jVectorMap会生成100x100

所以我在生成我的jVectorMap时遇到问题。

地图本身位于我创建的非常自定义的下拉菜单中，我怀疑这是问题所在。

当我将鼠标悬停在菜单项上以打开包含地图的下拉菜单时，实际的svg开始时的强制尺寸为100px x 100px。

我在下拉菜单的mouseclick事件以及容器本身的mouseover事件上都调用了“ map.setSize（）”时，尝试做一些变通办法。这里的问题是我的下拉菜单不受click事件的影响，但在mouseover事件上显示。但是，在发生鼠标悬停事件时，尚未加载地图的实际容器，因此我仍然停留在100px x 100px svg的位置。

为了解决这个问题，我在容器本身的mouseover事件上放置了一个事件，但这也不是一件好事，因为它随后要求用户在容器上实际显示地图之前将鼠标移到容器上，但我不这样做想发生。

有没有办法在菜单事件发生之前将div内置在不可见的div中？

例如，我在jsfiddle http://jsfiddle.net/AEup9/上创建了这个问题

您会注意到，将鼠标悬停在“显示地图”菜单项（唯一的项）上时，下拉列表为空白（主题标题除外），直到将鼠标移到实际的下拉菜单上，然后重新加载地图。然后，通过使用在mouseover事件之前创建的“已加载”变量以及在同一事件中强制使用map.setSize（），将地图保留在此处：

var loaded = false;
$('#aamap').mouseover(function () {
    if (!loaded) {
        (function () {
            map = new jvm.WorldMap({
                map: 'za_mill_en',
                container: $('#southafrica-map'),
                backgroundColor: '#cbd9f5',
                initial: {
                    fill: 'white'
                },
                series: {
                    regions: [{
                        attribute: 'stroke'
                    }]
                }
            });

            loaded = true;

        })();
    }
    map.setSize();
});

这是我的粗略工作，但不是我真正想要的，因为我希望地图第一次出现。

有人能帮我一下吗？

编辑：由于这个问题，我最终决定不继续使用jvectormap。相反，我选择使用在某种程度上是jvectormap分支的jqvmap，但是jvectormap遇到的问题不再是问题。

最佳答案

我也遇到了这个问题。
为了解决该问题，我们需要在地图容器可见时在地图对象上运行updateSize方法。首先，要获取地图对象，我们需要使用以下命令：
$('#world-map').vectorMap('get', 'mapObject')并在其上执行updateSize时，例如：

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

或更短的形式：

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

关于javascript - 最初隐藏显示对象时，jVectorMap会生成100x100，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23453297/