JQVMAP 选定区域取消选择与 JSFIDDLE 演示

Question

好的，我的网站上有一个 JQVMAP 的 select 状态搜索框。在我添加清除功能之前，一切都很好。

我还必须合并成员 HardCode Link to the patch

的补丁

Found the solution, change line 466 in jqvmap.js file to:

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 因为在清除后如果我 select 任何其他状态我改回原始的所有状态颜色显示备份。

我的问题是：

我如何才能清除 selected 状态，这样我就可以 select 不同的状态而无需单击之前 selected 的每个状态

更新

我已经能够从控制台运行这个命令，我可以 select 和 deselect 状态...但它不会 deselect a单击 select.

的状态

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

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

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

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

JSFIDDLE DEMO

Answer 1

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

中的信息

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

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

Answer 2

我刚刚将这个函数添加到库中

setSelectedRegions: function(keys){
    for (var key in this.countries) {
        this.deselect(key, undefined);
    }
    var array = keys.split(",");

    for (i=0;i<array.length;i++) {
        //alert(array[i])
        this.select(array[i], undefined);
    }
},

后来用作

jQuery('#vmap').vectorMap('set', 'selectedRegions', 'gb,us');

JQVMAP 选定区域取消选择与 JSFIDDLE 演示

JQVMAP selected regions deselect with JSFIDDLE Demo

javascript

jquery

jqvmap

我的问题是：

更新

JSFIDDLE DEMO