javascript - jVectorMap渲染得太小

我的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可能是一个问题)，并且在初始化矢量 map 时定义了$('#team-map-usa') clientHeight和clientWidth。

这是我第一次使用jVectorMap，我一定会丢失一些东西。关于如何使 map 显示正确尺寸的任何建议？

最佳答案

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

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

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

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