3

地図を表示してさまざまな国をクリックできるシンプルな Web サイトを作成しようとしています。

外観にはブートストラップを使用し、マップには 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 に答える