3

Jvectormapを使用してマップを切り替えようとしています。

現在、私は2つのdivを持っています。1つは「世界地図」、もう1つは「us-map」です。米国の地図は非表示になっています。誰かが世界地図で米国をクリックすると、世界地図divが閉じ、米国地図が開きます。これはうまく機能します。

米国の地図を表示すると、ユーザーを世界地図に戻すように設計されたボタンも表示されます。ただし、これをクリックすると、2つの世界地図が表示されます。私は根本的に間違ったことをしていると確信していますが、これに関するドキュメントを見つけることができます。これはよくあることだと思いました。

どんなポインタも素晴らしいでしょう。

DIVSと戻るボタンの画像：

<table width="900" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="left"><img src="images/titletext.png"></td>
<td align="right"><img src="images/backtoworld.png" border="0" id="backtoworld" style="display:none;" onClick="showworldmap()"></td>
</tr>
</table>


</td>
</tr>
<Tr>
<Td align="center">

<div id="world-map" style="display:block;"></div>
<div id="us-map" style="display:none;"></div>

JQuery / JavaScript：

 function showusmap() {
      document.getElementById("world-map").style.display = 'none';
      document.getElementById("us-map").style.display = 'block';
      document.getElementById("backtoworld").style.display = 'block';

      openusmap()
 }

     function openusmap() {

      $('#us-map').vectorMap({
    map: "us_aea_en",
    normalizeFunction: 'polynomial',
    backgroundColor: 'transparent',
    regionStyle: {
    initial: {
    fill: '#128da7',
    }},
    onRegionClick: function(event, code){
            //  if (code == "US") { showmap('us_aea_en') }
    },

    series: {

        regions: [{
            values: {
                "US-CA":'#006633',
                "US-IL":'#006633',
                "US-IN":'#006633',
                "US-DC":'#006633',
                "US-WA":'#006633',
                "US-FL":'#006633',
                "US-TX":'#006633',
                "US-OR":'#006633',
                "US-OH":'#006633',
                "US-MS":'#006633',
                "US-OK":'#006633',
                "US-MI":'#006633',
                "US-PA":'#006633',
                "US-NY":'#006633',
                "US-MN":'#006633',
                "US-NC":'#006633',
                "US-GA":'#006633',
                "US-AL":'#006633',
                "US-VA":'#006633',
                "US-VT":'#006633',
                "US-CT":'#006633',
                "US-MO":'#006633',
                "US-AZ":'#006633',
                "US-NJ":'#006633',

                }
        }]
    }
})

  }


function showworldmap() {

     document.getElementById("us-map").style.display = 'none';
      document.getElementById("world-map").style.display = 'block';
      document.getElementById("backtoworld").style.display = 'none';

      openworldmap()
}

function openworldmap() {

        $('#world-map').vectorMap({
            map: "world_mill_en",
            normalizeFunction: 'polynomial',
            backgroundColor: 'transparent',
            regionStyle: {
            initial: {
            fill: '#128da7'

            }},
            onRegionClick: function(event, code){
                        if (code == "US") { showusmap()  }
            },

            series: {
                regions: [{
                    values: {
                        CZ:'#006633',
                        FR:'#006633',
                        IT:'#006633',
                        NL:'#006633',
                        US:'#006633',
                        CH:'#006633',
                        NO:'#006633',
                        SE:'#006633',
                        FI:'#006633',
                        AT:'#006633',
                        GR:'#006633',
                        CY:'#006633',
                        AU:'#006633',
                        BE:'#006633',
                        HU:'#006633',
                        GB:'#006633',
                        ZA:'#006633',
                        BR:'#006633',
                        CA:'#006633',
                        MX:'#006633',
                        PR:'#006633',
                        IL:'#006633',
                        PK:'#006633',
                        MY:'#006633',
                        JP:'#006633',
                    }
                }]
            }
        });
}
4

2 に答える 2

8

Alex Williams が提案したことを実行し、表示後に Map コンテナーで resize() をトリガーできます。次に、表示される前にスケーリングされます（少なくともフェードインする場合）。

var $container = $('#yourHiddenMap');
map = new jvm.WorldMap({
    container: $container,
    map: ...
});
$('#yourSwitchButton').click(function() {
    $container.fadeIn().resize();
});
于 2013-03-03T18:46:15.450 に答える
1

vectorMapライブラリをダウンロードしませんでした。ただし、が呼び出される$('#world-map')たびにウィジェットをロードしているようです。openusmap()米国と世界地図の両方でウィジェットを1回だけ初期化し、JQueryのtoggle関数を使用して地図を表示および非表示にします。または、ウィジェットのdestroyメソッドまたは同等のメソッドを使用することもできます。

于 2013-02-21T01:35:21.630 に答える