logo标签列表

Jqvmap如何使SVG随着div调整大小并启用缩放按钮

jquerycsstwitter-bootstrapsvgjqvmap
3
我正在尝试制作一个简单的网站，您可以在上面看到地图并点击不同的国家。
我使用Bootstrap进行外观设计，并希望使用jqvmap来显示地图。
我已经了解到调整地图以动态适应窗口大小可能会很棘手，但我真的需要让它正常工作。目前，我成功使
的尺寸适应窗口的大小，但我不知道如何使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>

欢迎提出任何问题，我们会尽力帮助解决。

抱歉，我可能错过了您的评论通知。最终我切换到了另一个地图插件。现在一切都正常了，没有任何问题。无论如何，还是谢谢您。 - Alexandre Rivara
1个回答
3
尝试为您的container-fluid元素指定宽度和高度。
我曾经遇到过同样的问题，通过指定这些值，错误消失了。似乎您不能使用没有这些值的元素来存储地图，因为它会被认为是无限的。我没有深入研究代码，看看为什么会出现这种情况，但如果有人遇到这个问题，请告诉我结果如何。
希望这可以帮助您。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接