jVectorMap 渲染太小答案

【问题标题】：jVectorMap renders too smalljVectorMap 渲染太小
【发布时间】：2014-11-13 07:42:19
【问题描述】：

我的 jVectorMap 没有采用我在包含 div 上提供的新高度，并且仅以 54 像素的默认 (?) 高度呈现。

这是在我的 scripts.js 文件中的 document.ready 函数中：

$('#team-map-usa').vectorMap({
  map: 'us_lcc_en',
  backgroundColor: '#ffffff',
  hoverColor: '#999999',
  color: '#dddddd',
  normalizeFunction: 'polynomial',
  values: myData,
  scaleColors: ['#d0c4dc', '#d1b0eb', '#b296cb', '#47006b'],
  onLabelShow: function(event, label, code) {
    label.text(code);
  })
});

包含div：

    <section id="top">
      <div id="team-map-usa" style="width: 600px; height: 400px;"></div>
    </section>

文档表明，如果我在包含的 div 上设置了宽度和高度，则应将其应用于创建的 jVectorMap。 div 在任何时候都不会隐藏（我在这里读到：Jvectormap very small on div change 可能是一个问题），$('#team-map-usa') clientHeight 和 clientWidth 都是在初始化向量图时定义的。

这是我第一次使用 jVectorMap，我一定遗漏了一些东西。有关如何使地图显示正确大小的任何建议？

【问题讨论】：

您解决过这个问题吗？我也有同样的问题...

标签： javascript jquery html css jvectormap

【解决方案1】：

如果您的页面中没有包含 jquery-jvectormap-2.0.1.css，则需要对 jVectorMap 生成的内容进行样式设置。

在您的情况下，将以下内容添加到您的样式中应该可以解决问题

.jvectormap-container {
    height:100%;
    width:100%;
}

您可以查看http://jvectormap.com/css/jquery-jvectormap-2.0.1.css，希望能找到您需要的所有样式。

【讨论】：

对我来说，解决方案是在页面中正确包含jquery-jvectormap...css！我拼错了。例如。我在 HTML 的中遗漏了这个：<link rel="stylesheet" media="all" href="bower_components/jvectormap202/dist/css/jquery-jvectormap-2.0.2.css"></script> 我使用的是this Bower variant。

【解决方案2】：

您必须在页面上包含 jquery-jvectormap-2.0.4.css 才能解决此问题。只需检查您是否拼错了文件名，或者您可能错过了在页面上添加此内容。

【讨论】：

【解决方案3】：

当您在具有父值的元素上触发 vectorMap() 时 display: none 它将呈现为超小。所以解决方案是使用 可见性：隐藏而不是显示：无

您可以运行此代码并检查地图是否调整为正常状态：

window.dispatchEvent(new Event('resize'));

【讨论】：

【解决方案4】：

这不是答案，但可能会有所帮助：

html, body, #mapa, #mapa_dos{ height: 100%; width: 100%; margin: 0; padding: 0; }

在我正在处理的示例中，我有两张地图，id="mapa" 和 id="mapa_dos"。 div 的容器是 html 和 body 标签，因此在整个屏幕中显示地图。

【讨论】：