我正在尝试制作一个简单的网站，您可以在其中查看 map 并单击不同的国家/地区。
我使用 bootstrap 进行外观，并想使用 jqvmap 进行 map 。
我读到，让 map 动态调整以适应窗口大小的调整可能很棘手，但我确实需要让它发挥作用。现在我设法制作 <div> 的尺寸适应窗口的大小，但我不知道如何制作svg也要适应。它可能已链接，即使使用enableZoom: true，放大和缩小按钮也不起作用。参数。
当我查看控制台时，出现以下错误，但在互联网上搜索时没有找到解决方案:
Error: <g> attribute transform: Expected number, "…le(0) translate(Infinity, 0)".
和
Error: <g> attribute transform: Expected number, "scale(NaN) translate(0…".
它们非常相似，我猜它们来自同一问题。
此标签<g transform="scale(NaN) translate(NaN, NaN)">是 <svg> 的直接子级标签。我尝试过使用jQuery来修改这个属性并进行疯狂的猜测，但我猜错了。
这是我的代码:
<head>
.
.
.
<script type="text/javascript">
var ratio=0.60;
$(document).ready(function() {
$('#vmapWorld').vectorMap({
map: 'world_en',
backgroundColor: null,
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true
});
$("#vmapWorld > svg").css("height", $(this).width()*ratio);
});
$(window).resize(function(){
$("#vmapWorld > svg").css("height", $(this).width()*ratio);
});
</script>
</head>
<body style="background-color: #a5bfdd">
<div class="container-fluid" id="vmapWorld" style="background-color: #16982a">
</div>
</body>
欢迎任何帮助。
最佳答案
尝试为您的 container-fluid 元素指定宽度和高度。
我也遇到过同样的问题，通过指定这些问题，错误就消失了。看来您无法使用没有这些元素的元素来存储您的 map ，因为它会被视为无限。我没有更深入地研究代码来了解为什么会发生这种情况，但如果其他人遇到这个问题，请告诉我它是如何进行的。
希望这有帮助。
关于jquery - Jqvmap如何使svg使用div和缩放按钮调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45419647/