Javascript JQVMAP使用JSFIDDLE Demo取消选择选定区域

好的，我在我的网站上有一个选择搜索框的州。在我添加Clear函数之前，一切都很好

我还必须合并来自成员硬代码的补丁

找到解决方案，将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

，因为清除后，如果我选择任何其他状态，则所有更改回原始颜色的状态都会显示backup

我的问题是: 如何清除所选状态，以便在不单击之前选择的每个状态的情况下选择不同的状态

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

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

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

我需要清除被点击的州

下面是我的JSFIDLE，它将向您展示正在发生的事情：

---

您将信息存储在变量

高亮显示
，然后使用
高亮显示2
清理地图。它不会更改突出显示的
中的信息，因此当您触发
onRegionClick（）
时，它将更改回您选择的内容

使用全局变量使
高亮显示
的范围跨越两个脚本，然后将
高亮显示
替换为
高亮显示
并删除
高亮显示
删除

请看这里，我想这就是您想要的。
我刚刚将此函数添加到库中

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

这种把戏很难处理：它抱怨HTML区域任何编辑上的
标记，外部jqvmap资源加载顺序错误（我看到
TypeError:jQuery.fn.vectoramap不是页面加载上的函数
），并且从jqvmap.com链接的脚本中是否包含@HardCode的补丁？修复这些东西可能会带来更多帮助…你可以直接访问我的页面@只需创建用户名和密码。。。任何东西都会带你去我的搜索。。。它在起点或终点的左边。。。我会给演示信誉，但不知道有多少人会想尝试…一切都纳入我的网站，它仍在开发中。。。所以数据库将在完成时被清除。如果需要查看包含选定状态的文本框。。。将隐藏字段更改为文本。它就在地图的正下方。清除链接对我来说很好。有什么问题？单击“清除”链接后，请尝试选择其他状态。它还将突出显示所有其他状态…
highlight1
与
omap
原始地图一起使用，
highlight2
与
dmap
目标地图一起使用。它们是同一页上的两个独立地图。您的JSFIDLE工作正常。。。这就是我想要的，当它也允许我的时候，我会奖励积分。这是一个简单的解决办法。现在我只需要把一个不同的变量，分别作为起点和终点，这就是为什么我把它作为一个局部变量。但是我会解决的。你现在成功了吗？如果你还有什么问题，问问它。我看不到你设计的网站有更新。我已经在本地注册了。我会在几分钟内现场推送。。我只是复制了功能，并完全分离了高光。。。还有一个小时我才能给积分
jQuery('#vmap').vectorMap('set', 'selectedRegions', 'gb,us');