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可能是一个问题)，并且$('#team-map-usa') clientHeight和clientWidth都是在初始化vectormap时定义的。
这是我第一次使用jVectorMap，我肯定遗漏了一些东西。对于如何让地图显示出合适的大小有什么建议吗？
回答 4
Stack Overflow用户
发布于 2014-12-02 21:03:11
如果页面上没有包含jquery- jVectorMap -2.0.1.css，则需要对jVectorMap生成的内容进行样式设置。
在您的示例中，将以下代码添加到您的样式中应该会起到作用
.jvectormap-container {
height:100%;
width:100%;
}您可以查看http://jvectormap.com/css/jquery-jvectormap-2.0.1.css，希望能找到所需的所有样式。
Stack Overflow用户
发布于 2015-09-15 20:57:52
您必须在页面上包含jquery-jvectormap-2.0.4.css才能解决此问题。只需检查您是否拼写错误的文件名，或者您可能错过了添加到页面上。
Stack Overflow用户
发布于 2019-08-19 20:36:08
当您在父元素上触发vectorMap()时，它将呈现为非常小的显示：。所以解决方案是使用visibility: hidden而不是display: none
您可以运行此代码并检查map大小是否调整为正常状态：
window.dispatchEvent(新事件(‘resize’))；
https://stackoverflow.com/questions/26903678
复制相似问题
腾讯云开发者
