Question

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

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

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

我尝试做了一些变通办法，我在下拉列表的mouseclick事件和容器本身的mouseover事件中调用了“map.setSize（）”。这里的问题是我的下拉列表不受点击事件的影响，但显示在鼠标悬停事件上。但是，在鼠标悬停事件发生时，地图的实际容器没有加载，所以我仍然坚持使用100px x 100px svg。

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

有没有办法在我的菜单事件发生之前在div中构建地图？

关于我的问题的一个例子，我在jsfiddle http://jsfiddle.net/AEup9/

创建了这个

您会注意到，当您将鼠标悬停在“显示地图”菜单项（唯一项目）上时，除了主题标题之外，下拉列表为空白，直到您将鼠标移到实际的下拉本身上然后重新加载地图。然后我使用在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遇到的问题不再是问题。

Answer 1

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

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

或缩写形式：

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

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

1 个答案: