JVectorMap 错误：<g> 属性转换：预期数字，“比例（NaN）翻译（N ...”

Question

你好吗？ 我正在尝试制作一个包含选择出生国家/地区地图的表格。 为此，我使用 JVectorMap。 但是，在 Google Chrome 开发者控制台中，我收到以下消息

jquery-jvectormap-2.0.5.min.js:1 Error: <g> attribute transform: Expected number, "scale(NaN) translate(N…".

有谁知道这可能是什么问题？ 这是我的地图代码：

<div id="world-map-log" style="width:100%;height:175px;"></div>

<script>
$(function() {
    $('#world-map-log').vectorMap({

        map : 'world_mill',
        backgroundColor : '#F9F9F9', //#F9F9F9
        regionsSelectable : true,

        regionStyle : {
            initial : {
                fill : '#B8E186'
            },
            selected : {
                fill : '#F4A582'
            }
        },
        
        zoomOnScroll: false,
        zoomButtons : false

    });
});

随着这些库

    <script src="js/jquery.js"></script>
    <script src="js/jquery-jvectormap-2.0.5.min.js"></script>
    <script src="js/jquery-jvectormap-world-mill.js"></script>
    <link rel="stylesheet" href="css/jquery-jvectormap-2.0.5.css" type="text/css" media="screen" />

谢谢，我希望有人能帮助我，大卫

Answer 1

您是否在通过切换隐藏的 Bootstrap 组件中使用 Jvectormap？ BS 折叠或标签例如？ Jvectormap 和其他一些 SVG 库不喜欢 Bootstrap 处理此问题的默认方式（通过 display:none）。 他们陷入了试图根据空/非数值确定比例值的负反馈循环中。

您需要使用一些 CSS 覆盖显示元素的默认行为，下面的示例将涵盖选项卡组件。 有些人可能会使用“.show”类来控制它。

.tab-content > .tab-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
}

Answer 2

在 jquery-jvectormap-2.0.5.min.js jvm.SVGCanvasElement.prototype.applyTransformParams=function(scale,transX,transY){this.scale=scale,this.transX=transX,this.transY=transY, this.rootElement.node.setAttribute("transform","scale("+scale+") translate("+transX+", "+transY+")")}

用。。。来代替
jvm.SVGCanvasElement.prototype.applyTransformParams=function(scale,transX,transY){if(isNaN(scale) && isNaN(transX) && isNaN(transY)) return;this.scale=scale,this.transX=transX,this. transY=transY,this.rootElement.node.setAttribute("transform","scale("+scale+") translate("+transX+", "+transY+")")}