Блог

как дела? Я пытаюсь создать форму, содержащую карту, в которой можно выбрать страну рождения. Для этого я использую 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" />
  

Спасибо, я надеюсь, что кто-нибудь сможет мне помочь,
Дэвид

Используете ли вы Jvectormap в компоненте начальной загрузки, который скрывается переключателем? Например, сворачивание BS или табуляция? Jvectormap и некоторым другим библиотекам SVG не нравится способ, которым Bootstrap обрабатывает это по умолчанию (через display:none). Они попадают в цикл отрицательной обратной связи, пытаясь определить значения масштаба по нулевым / нечисловым значениям.

Вам нужно переопределить поведение отображаемого элемента по умолчанию с помощью некоторого CSS, приведенный ниже пример будет охватывать компонент tab. Некоторые могут использовать класс ‘.show’ для управления им.

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

Найдите этот скрипт в 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 » ) перевести(» TransX «, » transY «)»)}

Заменить на
jvm.SVGCanvasElement.prototype.applyTransformParams=функция(масштабирование, TransX, transY){if (isNaN(масштаб) amp;amp; isNaN(TransX) amp;amp; isNaN (transY)) return;this.scale=scale,this.transX=transX,this.transY=transY,this.rootElement.node.setAttribute(«transform»,»scale(» scale » ) перевести(» TransX «, » transY «)»)}