在Jvectormap中切換地圖？

Question

我想使用Jvectormap在地圖之間切換。

目前我有兩個div，一個「世界地圖」和一個「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', 
        } 
       }] 
      } 
     }); 
} 

Answer 1

你可以做Alex Williams建議的，並在顯示它之後在地圖容器上觸發調整大小（）。然後在你看到它之前縮放（至少如果你淡入）。

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

Answer 2

我沒有下載vectorMap庫。但是，每次調用openusmap()時，您似乎都將該小部件加載到$('#world-map')上。我只會在美國和世界地圖上初始化這個小部件一次，並使用JQuery的toggle函數來隱藏和顯示地圖。或者，您可以使用小部件的destroy方法或一些等效方法。