Переключить карты в Jvectormap?

Я пытаюсь переключаться между картами с помощью Jvectormap.

В настоящее время у меня есть два div, одна «карта мира» и одна «карта США». Карта США скрыта. Когда кто-то нажимает на США на карте мира, div карты мира закрывается и открывается карта США, работает хорошо.

При отображении карты США я также открываю кнопку, предназначенную для возврата пользователя на карту мира. Однако при нажатии на нее отображаются ДВЕ карты мира. Я уверен, что делаю что-то принципиально неправильное, но не могу найти никакой документации по этому поводу. Я бы подумал, что это обычное дело.

Любые указатели были бы замечательными.

Изображение кнопки DIVS и кнопки "Назад":

<table width="900" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="left"><img src="images/titletext.png"></td>
<td align="right"><img src="images/backtoworld.png" border="0" id="backtoworld" style="display:none;" onClick="showworldmap()"></td>
</tr>
</table>


</td>
</tr>
<Tr>
<Td align="center">

<div id="world-map" style="display:block;"></div>
<div id="us-map" style="display:none;"></div>

JQuery/JavaScript:

 function showusmap() {
      document.getElementById("world-map").style.display = 'none';
      document.getElementById("us-map").style.display = 'block';
      document.getElementById("backtoworld").style.display = 'block';

      openusmap()
 }

     function openusmap() {

      $('#us-map').vectorMap({
    map: "us_aea_en",
    normalizeFunction: 'polynomial',
    backgroundColor: 'transparent',
    regionStyle: {
    initial: {
    fill: '#128da7',
    }},
    onRegionClick: function(event, code){
            //  if (code == "US") { showmap('us_aea_en') }
    },

    series: {

        regions: [{
            values: {
                "US-CA":'#006633',
                "US-IL":'#006633',
                "US-IN":'#006633',
                "US-DC":'#006633',
                "US-WA":'#006633',
                "US-FL":'#006633',
                "US-TX":'#006633',
                "US-OR":'#006633',
                "US-OH":'#006633',
                "US-MS":'#006633',
                "US-OK":'#006633',
                "US-MI":'#006633',
                "US-PA":'#006633',
                "US-NY":'#006633',
                "US-MN":'#006633',
                "US-NC":'#006633',
                "US-GA":'#006633',
                "US-AL":'#006633',
                "US-VA":'#006633',
                "US-VT":'#006633',
                "US-CT":'#006633',
                "US-MO":'#006633',
                "US-AZ":'#006633',
                "US-NJ":'#006633',

                }
        }]
    }
})

  }


function showworldmap() {

     document.getElementById("us-map").style.display = 'none';
      document.getElementById("world-map").style.display = 'block';
      document.getElementById("backtoworld").style.display = 'none';

      openworldmap()
}

function openworldmap() {

        $('#world-map').vectorMap({
            map: "world_mill_en",
            normalizeFunction: 'polynomial',
            backgroundColor: 'transparent',
            regionStyle: {
            initial: {
            fill: '#128da7'

            }},
            onRegionClick: function(event, code){
                        if (code == "US") { showusmap()  }
            },

            series: {
                regions: [{
                    values: {
                        CZ:'#006633',
                        FR:'#006633',
                        IT:'#006633',
                        NL:'#006633',
                        US:'#006633',
                        CH:'#006633',
                        NO:'#006633',
                        SE:'#006633',
                        FI:'#006633',
                        AT:'#006633',
                        GR:'#006633',
                        CY:'#006633',
                        AU:'#006633',
                        BE:'#006633',
                        HU:'#006633',
                        GB:'#006633',
                        ZA:'#006633',
                        BR:'#006633',
                        CA:'#006633',
                        MX:'#006633',
                        PR:'#006633',
                        IL:'#006633',
                        PK:'#006633',
                        MY:'#006633',
                        JP:'#006633',
                    }
                }]
            }
        });
}

javascript html jquery jvectormap
person Dan James Palmer    schedule 20.02.2013    source источник
comment
Вы когда-нибудь находили решение этого?   -  person chishaku    schedule 03.11.2014
comment
Я сделал, да. Я пришлю вам то, что у меня есть, по электронной почте @chishaku   -  person Dan James Palmer    schedule 04.11.2014
comment
мое имя пользователя в gmail   -  person chishaku    schedule 04.11.2014
comment
@DanJamesPalmer выкапывает это из могилы, не могли бы вы восстановить то, что вы сделали, и опубликовать в теме? :)   -  person Aaron Lavers    schedule 07.12.2016

Ответы (2)


arrow_upward
8
arrow_downward

Вы можете сделать то, что предложил Алекс Уильямс, и запустить resize() в контейнере карты после его показа. Затем он масштабируется до того, как вы его увидите (по крайней мере, если вы исчезнете).

var $container = $('#yourHiddenMap');
map = new jvm.WorldMap({
    container: $container,
    map: ...
});
$('#yourSwitchButton').click(function() {
    $container.fadeIn().resize();
});
person Lorenz Haase    schedule 03.03.2013
comment
Спасибо, что привели меня к тому, что мне было нужно -› $container.resize(); - person AO_; 26.03.2013

arrow_upward
1
arrow_downward

Я не скачивал библиотеку vectorMap. Однако похоже, что вы загружаете виджет в $('#world-map') каждый раз, когда вызывается openusmap(). Я бы инициализировал виджет только один раз на картах США и мира и использовал функцию JQuery toggle. чтобы скрыть и показать карты. В качестве альтернативы вы можете использовать метод виджета destroy или что-то подобное.

person Alex Williams    schedule 21.02.2013
comment
Я рассмотрю то, что вы предложили, спасибо за ваш вклад! - person Dan James Palmer; 21.02.2013
comment
Используя .toggle, вы просто имеете в виду скрытие и отображение нужного мне div? Если это так, это не сработает, так как инициализация карты в скрытом div приведет к появлению крошечной карты, когда она появится в поле зрения. - person Dan James Palmer; 21.02.2013