Javascript 当显示对象最初隐藏时，jVectorMap生成100x100

所以我在生成jVectorMap时遇到了一个问题

地图本身位于我创建的一个非常定制的下拉菜单中，这就是我怀疑问题所在的地方

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

当我在下拉菜单的mouseclick事件和容器本身的mouseover事件上调用“map.setSize（）”时，我尝试了许多解决方法。这里的问题是我的下拉列表不受单击事件的影响，而是显示在鼠标悬停事件上。但是，在mouseover事件发生时，地图的实际容器尚未加载，因此我仍然使用100px x 100px svg

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

有没有一种方法可以在我的菜单事件发生之前不可见的div中构建映射

作为我问题的一个例子，我在JSFIDLE上创建了这个

您会注意到，当您将鼠标悬停在“Show Map”（显示地图）菜单项（唯一的项）上时，下拉列表除主题标题外为空白，直到您将鼠标移到实际下拉列表上，然后重新加载地图。然后，我使用mouseover事件之前创建的“loaded”变量和同一事件中的force 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。相反，我选择使用jqvmap，它在某种程度上是jvectormap的一个分支，但是jvectormap遇到的问题不再是问题。

我也遇到了这个问题。 为了解决这个问题，我们需要在地图容器可见时对地图对象运行updateSize方法。首先，要获取贴图对象，我们需要使用以下命令：

$（“#世界地图”）.vectorMap（'get'，'mapObject'）

并在其上执行updateSize时，如：

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

或以较短的形式：

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

---

不需要。在调用js和css jVectorMap的库之后，只需在$（document.ready）内调用vectorMap（函数（）{your code}）；