Question

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

我使用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>

欢迎任何帮助。

Answer 1

尝试为container-fluid元素同时指定宽度和高度。

我也看到了同样的问题，通过指定这些错误，错误消失了。似乎您不能在没有元素的情况下使用元素来存储地图，因为它会被视为infinite。我没有深入研究代码来了解为什么会发生这种情况，但是如果其他人遇到此问题，请让我知道它的进展。

希望这会有所帮助。

Jqvmap如何使用div和zoom按钮调整svg大小

1 个答案: