Załaduj kolejną jvectormap na region kliknij

Question

Próbuję załadować mapę określonego regionu onRegionClick. Wydaje się jednak, że region ładuje się po wprowadzeniu zmiany. Oto mój kod:

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

Wyjście konsoli to:

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

W celu korzystania z funkcji switchMap, należy zainicjować nowy vectorMap po plik został w pełni załadowany, więc intializing go w oddzwonić. .

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

Answer 2

Powinieneś tylko umieścić wysokość lub szerokość elementu div, aby poprawnie wyświetlić mapę. jvectormap automatycznie oblicza brakujący wymiar, aby zachować współczynnik proporcji mapy. Jeśli zmieniasz wysokość dynamicznie za pomocą javascript, upewnij się, że wywołasz updateSize na swoim obiekcie mapy. Pamiętaj, że możesz pobrać obiekt mapy za pomocą tego var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject');, a następnie zadzwonić pod numer mapObject.updateSize();