3

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

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

欢迎任何帮助。

4

1 回答 1

2

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

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

希望这可以帮助。

于 2019-05-31T17:31:24.857 回答