在Jvectormap中切换地图？

Question

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

目前，我有两个div，一个是“world-map”，另一个是“us-map”。美国地图被隐藏起来。当有人点击世界地图上的美国时，世界地图div关闭，美国地图打开，效果很好。

在显示美国地图时，我还展示了一个按钮，旨在将用户带回世界地图。然而，当单击此按钮时，它会显示两个世界地图。我确定我做错了一些根本性的东西，但找不到任何文档。我认为这是一个常见的需求。

任何指针都将是很好的。

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

- Dan James Palmer

---

你有没有找到解决办法？ - chishaku

是的，我做了。我会通过电子邮件@chishaku将我的成果发送给你。 - Dan

我的用户名在gmail上 - chishaku

@DanJamesPalmer，从坟墓里挖出来的，你能否恢复你所做的并在帖子中发布呢？ :) - Aaron Lavers

Answer 1

您可以按照Alex Williams的建议，在显示地图后触发resize()。然后在您看到它之前进行缩放（至少如果您使用了淡入效果）。

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

- Lorenz Haase

---

谢谢您引导我找到所需的内容 -> $container.resize(); - AO_

Answer 2

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

- Alex Williams

---

我会研究一下你所建议的，感谢你的意见！ - Dan

你是指使用 .toggle 仅仅是隐藏和显示相应的 div 吗？如果是这样的话，那么它不会起作用，因为在隐藏的 div 中初始化地图将导致当它被带到视图中时出现微小的地图。 - Dan