Caricare un altro jvectormap sulla regione, fare clic su

Question

Sto tentando di caricare la mappa della regione specifica onRegionClick. Tuttavia sembra che la regione stia caricando dopo che è stata apportata la modifica. Qui è il mio codice:

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

L'uscita della console è questo:

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

Per poter utilizzare la funzione switchMap, è necessario inizializzare il nuovo VectorMap dopo che il file è stato completamente caricato, INIZIALIZZA così in un richiama. .

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

Answer 2

si dovrebbe solo mettere l'altezza o la larghezza del div per rendere correttamente la mappa. jvectormap calcolerà automaticamente la dimensione mancante per mantenere le proporzioni della mappa. Se stai cambiando l'altezza in modo dinamico usando javascript, assicurati di chiamare updateSize sull'oggetto della mappa. Si noti che è possibile ottenere l'oggetto della mappa utilizzando questo var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject'); quindi chiamare mapObject.updateSize();