Загрузите другую карту jvector на регион, нажмите

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

Вывод консоли такой:

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

Чтобы использовать функцию switchMap, вы должны инициализировать новый 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();