Jqvmap 如何使用 div 和缩放按钮调整 svg 大小答案

【问题标题】：Jqvmap how to make svg resize with the div and zoom buttons workJqvmap 如何使用 div 和缩放按钮调整 svg 大小
【发布时间】：2017-07-31 15:19:00
【问题描述】：

我正在尝试制作一个简单的网站，您可以在其中查看地图并单击不同的国家/地区。

我使用 bootstrap 作为外观，并希望使用 jqvmap 作为地图。

我已经读到让地图动态调整以适应窗口大小的调整可能很棘手，但我真的需要让它工作。现在我设法使<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>

欢迎任何帮助。

【问题讨论】：

对不起，我一定错过了您的评论通知。最后我切换到另一个地图插件。现在一切正常，无需解决。还是谢谢你。

标签： jquery css twitter-bootstrap svg jqvmap

【解决方案1】：

尝试为您的 container-fluid 元素同时指定 width 和 height。

我看到了同样的问题，通过指定这些问题，错误就消失了。看来你不能使用没有那些元素来存储你的地图，因为它会被认为是infinite。我没有深入研究代码以了解为什么会发生这种情况，但如果其他人面临这个问题，请告诉我它是怎么回事。

希望这会有所帮助。

【讨论】：