Question

我的jVectorMap没有采用我在包含div上提供的新高度，只在默认（？）高度为54px时呈现。

这是我的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而且我必须遗漏一些东西。有关如何使地图显示正确尺寸的任何建议吗？

Answer 1

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

在您的情况下，将以下内容添加到您的样式应该可以做到这一点

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

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

Answer 2

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

Answer 3

当您在具有父值的元素上触发vectorMap（）时 显示：无，它将呈现为超小尺寸。所以解决方案是用 可见性：隐藏，而不显示：无

您可以运行以下代码，并检查地图是否将大小调整为正常状态：

window.dispatchEvent（new Event（'resize'））;

Answer 4

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

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

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

jVectorMap渲染太小

4 个答案: