Laden Sie eine andere jvectormap auf Region klicken

Question

Ich versuche, die spezifische Region Karte onRegionClick laden. Es scheint jedoch, dass die Region geladen wird, nachdem die Änderung vorgenommen wurde. Hier ist mein Code:

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)} 
    } 
}); 

Die Konsolenausgabe ist dies:

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

Um die switchMap Funktion zu nutzen, müssen Sie die neue Vektorkarte initialisieren, nachdem die Datei vollständig geladen wurde, so dass es in einem Initialisieren Rückrufen. .

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

Answer 2

Sie sollten nur die Höhe setzen oder die Breite des div richtig die Karte zu machen. jvectormap berechnet die fehlende Dimension automatisch, um das Kartenseitenverhältnis beizubehalten. Falls Sie die Höhe dynamisch mit Javascript ändern, sollten Sie auf Ihrem Kartenobjekt updateSize aufrufen. Beachten Sie, dass Sie das Kartenobjekt mit dieser var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject'); erhalten können, dann rufen Sie mapObject.updateSize();