JQVMAP选择的区域使用JSFIDDLE Demo取消选择

Question

好的我在我的网站上有一个JQVMAP来选择搜索框的状态.在我添加Clear功能之前,一切都很顺利.

我还必须将成员HardCode Link中的补丁合并到补丁中

找到解决方案,将jqvmap.js文件中的第466行更改为:

regionClickEvent = $.Event('regionClick.jqvmap');

jQuery(params.container).trigger(regionClickEvent, [code, mapData.pathes[code].name]);

这是我初始化它的方式:

// with this Code it will select states and change the color of selected states plus save the codes of selected states into a hidden field

$('#omap').vectorMap(
    {
        map: 'usa_en',
        backgroundColor: '#fff',
        borderColor: '#000',
        borderWidth: 4,
        color: '#f4f3f0',
        enableZoom: false,
        hoverColor: '#fece2f',
        hoverOpacity: null,
        normalizeFunction: 'linear',
        scaleColors: ['#b6d6ff', '#005ace'],
        selectedColor: '#db9b15',
        selectedRegion: null,
        showTooltip: true,
        multiSelectRegion: true,
        onRegionClick: function(element, code, region) {
            if(highlight[code]!=='#db9b15'){
                highlight[code]='#db9b15';
                origin = $('#search_origin_states');
                states = origin.val();
                if (states == ""){
                    origin.val(code);
                } else {
                    origin.val(states + "," + code);
                }
            } else {
                highlight[code]='#f4f3f0';
                states = origin.val();
                if (states.indexOf(","+code) >= 0) {
                    states = states.replace(","+code,"");
                    origin.val(states);
                } else if (states.indexOf(code+",") >= 0){
                    states = states.replace(code+",","");
                    origin.val(states);
                } else {
                    states = states.replace(code,"");
                    origin.val(states);
                }
            }
            $('#omap').vectorMap('set', 'colors', highlight);
        }
    });

我用来点击每个状态来清除它.但是我写了一个脚本来一键清除所有内容.

function search_map_clear(field, map) {
    var states = $('#search_' + field + '_states');
    var sel_states = states.val();
    var highlight2 = [];
    $.each(sel_states.split(','), function (i, code) {
        highlight2[code] = '#f4f3f0';
        $('#' + map).vectorMap('set', 'colors', highlight2);
    });
    states.val("");
}

这会将所有颜色更改回原始颜色,但显然它不会清除selectedRegions因为清除后如果我选择任何其他状态,我更改回原始颜色的所有状态都会显示回来.

我的问题是:

如何清除所选状态,以便我可以选择不同的状态,而无需单击之前选择的每个状态

UPDATE

我已经能够从控制台运行此命令,我可以选择和取消选择状态......但它不会取消选择单击以进行选择的状态.

$('#omap').vectorMap('select', 'ar');

$('#omap').vectorMap('deselect', 'ar');

我需要清除已被点击的状态......

这是我的jsFiddle,它将向您展示正在发生的事情:

JSFIDDLE DEMO

Answer 1

您将信息存储在变量中highlight，并使用 清理地图highlight2。它不会更改信息，highlight因此当您触发时，onRegionClick()它会变回您选择的信息。

使用全局变量让 的作用域highlight跨越两个脚本，然后替换highlight2为highlight并删除highlight2声明。

在这里看到jsfiddle，我想这就是你想要的。