Загрузите еще один jvectormap по клику региона

Я пытаюсь загрузить определенную карту региона 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)}
    }
});

Консольный вывод:

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

Ответ 1

Чтобы использовать функцию switchMap, вы должны инициализировать новую векторную карту после того, как файл был полностью загружен, таким образом, инициализируя его в обратном вызове.,

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

Ответ 2

вы должны поместить высоту или ширину div, чтобы правильно отобразить карту. jvectormap автоматически вычислит отсутствующий размер, чтобы сохранить соотношение сторон карты. Если вы динамически меняете высоту с помощью javascript, убедитесь, что вы вызываете updateSize на свой объект карты. Обратите внимание, что вы можете получить объект карты с помощью этого var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject');, затем вызвать mapObject.updateSize();