クリックすると別のjvectormapをロードする

Question

特定の地域マップonRegionClickをロードしようとしています。しかし、変更が行われた後に地域がロードされているように見えます。ここに私のコードは次のとおりです。

function switchMap(code) { 
    $.getScript('maps/'+ code +'.js'); 
    $('#map').vectorMap({map: code}); 
} 

$('#map').vectorMap({ 
    map: 'world_mill_en', 
    onRegionClick: function(event, code) { 
     if (code == "CA") {switchMap(code)} 
     if (code == "AF") {switchMap(code)} 
     if (code == "AL") {switchMap(code)} 
     if (code == "AR") {switchMap(code)} 
     if (code == "CH") {switchMap(code)} 
    } 
}); 

コンソール出力がこれです：switchMap機能を利用するためには

Uncaught Error: Attempt to use map which was not loaded: CA world-map.js:82 

OPTIONS file:///C:/Users/D-4/Desktop/find-a-bible/maps/CA.js?_=1364318443130 jquery-1.8.2.js:8416 

Answer 1

ファイルが完全にロードされた後、あなたは、このようにそれをintializing、新しいvectorMapを初期化する必要があります折り返し電話。 。

function switchMap(code) { 
    $.getScript('maps/'+ code +'.js' , function (data){ 
     $('#map').vectorMap({map: code}); 
    }); 
} 

Answer 2

マップを正しくレンダリングするには、divの高さまたは幅を入れてください。 jvectormapは欠けている次元を自動的に計算してマップのアスペクト比を維持します。 javascriptを使用して高さを動的に変更する場合は、updateSizeを地図オブジェクトに必ず呼び出してください。 このvar mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject');を使用してマップオブジェクトを取得してから、mapObject.updateSize();