jVectorMap 渲染太小

我的 jVectorMap 没有采用我在包含的 div 上提供的新高度，并且仅以默认（？）高度 54px 进行渲染。

这是我的 script.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 在 div 变化时非常小可能是一个问题）和$('#team-map-usa')clientHeight 和 clientWidth 都是在矢量图初始化时定义的。

这是我第一次使用 jVectorMap，我一定错过了一些东西。关于如何使地图显示正确尺寸有什么建议吗？

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

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

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

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