Jqvmap как заставить svg изменить размер с помощью кнопок div и zoom

Я пытаюсь сделать простой веб-сайт, где вы можете увидеть карту и нажать на разные страны.

Я использую 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>

Любая помощь приветствуется.

Источник

0 ответов

Попробуйте указать ширину и высоту для вашего container-fluid элемент.

Я видел ту же проблему, и, указав их, ошибка исчезла. Кажется, вы не можете использовать элемент без них для хранения вашей карты, как это будет считаться infinite, Я не углубился в код, чтобы понять, почему это происходит, но если кто-то еще сталкивается с этой проблемой, дайте мне знать, как это происходит.

Надеюсь это поможет.

Источник
Другие вопросы по тегам