8

我有两个 div，一个是世界地图，一个是美国地图。当美国在世界地图上单击时，我想隐藏该 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';
  }
4

5 回答 5

9

此问题是由于您在隐藏元素上初始化地图，当时无法正确计算其大小。尝试更改您的逻辑，以便在元素变得可见后初始化 jVectorMap。

于 2013-02-20T15:32:55.007 回答
7

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

$('$world-map').vectorMap('get','mapObject').updateSize();
于 2015-05-05T03:34:54.167 回答
4

您还可以在显示地图后在该地图的容器上触发 resize()。

我在这篇文章中做了一个例子：Switch maps in Jvectormap?

于 2013-03-03T18:49:40.967 回答
2

问题是带有美国地图的 div 是隐藏的，因此它无法正确计算地图大小（宽度）。相反，您可以将该 div 设置为具有高度：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-08T11:59:55.203 回答
1

我在 jVectorMap 显示大小方面遇到了同样的问题，并找到了一种让它们正确显示的方法。

问题是当您创建地图对象时。为使其正确显示，vectorMap 对象在创建时必须可见。话虽如此，当您将它们放入选项卡时，您应该：

  1. 单击第一个选项卡。
  2. 创建第一张地图。
  3. 单击第二个选项卡。
  4. 创建第二张地图.. ..
    您最终可以再次单击第一个选项卡，使其成为页面加载时的活动选项卡。

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

于 2013-05-24T20:47:03.963 回答