在Jvectormap中切换地图？

Question

我正在尝试使用Jvectormap在地图之间切换。

目前我有两个div，一个是“世界地图”，一个是“美国地图”。美国地图是隐藏的。当有人点击世界地图上的美国地图，世界地图div关闭，美国地图打开，工作良好。

在显示美国地图时，我还展示了一个按钮，该按钮旨在将用户带回世界地图。然而，当点击它时，它显示了两个世界地图。我确信我做了一些根本错误的事情，但是我不能找到任何关于这个的文档。我本以为这是一件很平常的事。

任何指示都是很好的。

DIVS和Back按钮图像：

<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',
                    }
                }]
            }
        });
}

Answer 1

您可以按照Alex的建议进行操作，并在显示Map容器后触发它的调整大小()。然后，在你看到它之前，它就会被缩放(至少当你淡入的时候)。

var $container = $('#yourHiddenMap');
map = new jvm.WorldMap({
    container: $container,
    map: ...
});
$('#yourSwitchButton').click(function() {
    $container.fadeIn().resize();
});

Answer 2

我没有下载vectorMap库。但是，每次调用$('#world-map')时，似乎都要将小部件加载到openusmap()中。我只会在美国和世界地图上初始化小部件一次，并使用JQuery的toggle函数来隐藏和显示地图。或者，您可以使用小部件的destroy方法或一些类似的方法。