Question

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

我还必须加入来自成员HardCode Link to the patch

的补丁

找到解决方案，将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，因为清除之后如果我选择任何其他状态，我更改回原始颜色的所有状态都会显示回来。< / p>

我的问题是：

如何清除所选状态，以便我可以选择不同的状态而不点击之前选择的每个状态

更新

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

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

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

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

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

JSFIDDLE DEMO

Answer 1

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

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

请在此处查看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');

使用JSFIDDLE Demo

我的问题是：

更新

JSFIDDLE DEMO

2 个答案: