Jquery Jqvmap如何使用div和zoom按钮调整svg大小
我正在尝试做一个简单的网站，在那里你可以看到地图，并点击不同的国家 我使用bootstrap作为外观，并希望使用jqvmap作为映射 我已经读到，它可以是棘手的，使地图动态调整，以调整窗口的大小，但我真的需要使它的工作。现在，我设法使Jquery Jqvmap如何使用div和zoom按钮调整svg大小,jquery,css,twitter-bootstrap,svg,jqvmap,Jquery,Css,Twitter Bootstrap,Svg,Jqvmap,我正在尝试做一个简单的网站，在那里你可以看到地图，并点击不同的国家 我使用bootstrap作为外观，并希望使用jqvmap作为映射 我已经读到，它可以是棘手的，使地图动态调整，以调整窗口的大小，但我真的需要使它的工作。现在，我设法使的尺寸适应窗口的大小，但我不知道如何使svg也适应。它可能被链接，放大和缩小按钮也不工作，即使使用启用缩放：true参数 当我查看控制台时，出现以下错误，但在internet上搜索时，我没有找到解决方案： Error: <g> attribute tra
svg启用缩放：trueError: <g> attribute transform: Expected number, "…le(0) translate(Infinity, 0)".
错误：属性转换：预期数字，“…le（0）平移（无穷大，0）”。
错误：属性转换：预期数字，“缩放（NaN）转换（0…”。
<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>
.
.
.
var比率=0.60；
$（文档）.ready（函数（）{
$（“#vmapWorld”）.vectorMap({
地图：“世界”，
背景颜色：空，
颜色：“#ffffff”，
悬停不透明度：0.7，
所选颜色：“#666666”，
启用缩放：真
});
$（“#vmapWorld>svg”）.css（“高度，$（此）.width（）*比率）；
});
$（窗口）。调整大小（函数（）{
$（“#vmapWorld>svg”）.css（“高度，$（此）.width（）*比率）；
});
欢迎任何帮助。尝试为您的
容器流体元素指定宽度和高度
我也看到了同样的问题，通过指定它们，错误消失了。似乎您不能使用没有这些元素的元素来存储地图，因为它被认为是无限的。我没有深入研究代码以了解为什么会发生这种情况，但是如果有人面临此问题，请告诉我它是如何发生的
希望这能有所帮助。抱歉，我一定错过了您的评论通知。最后我切换到了其他地图插件。现在一切都可以正常运行，无需解决。谢谢您。
<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>