JQVMAP选择的区域使用JSFIDDLE Demo取消选择 [英] JQVMAP selected regions deselect with JSFIDDLE Demo

问题描述

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

Ok I have a JQVMAP that I have on my site to select states for a search box. Everything worked great until I added my Clear function.

我还必须合并来自成员HardCode的补丁链接到补丁

I also had to incorporate the patch from member HardCode Link to the patch

找到解决方案，更改jqvmap.js文件中的第466行：

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]);

这是我初始化它的方式：

This is how I initialize it:

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

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

I use to have to click each state to clear it. But I wrote a script to clear all in one click.

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

This will change all colors back to the original color, but apparently it does not clear the selectedRegions because after clearing if I select any other state all the states that I changed back to original color show back up.

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

How can I clear the selected states so were I can select different ones without clicking on every state that was selected prior

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

I have been able to run this command from the console and I can select and deselect states... But it will not deselect a state that was clicked on to select.

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

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

我需要清除已被点击的州...

I need to clear out the states that have been clicked on...

这是我的jsFiddle，它将告诉你发生了什么：

Here is my jsFiddle that will show you what is happening:

推荐答案

您将信息存储在变量<$中c $ c>突出显示，然后使用 highlight2 清理地图。它不会更改突出显示中的信息，这样当您触发 onRegionClick（）时，它将更改回您选择的内容。

You store information in the variable highlight, and you clean the map with highlight2. It will not change the information in highlight so that when you trigger onRegionClick() it will change back to what you select.

使用全局变量让的范围突出显示来交叉两个脚本，然后替换 highlight2 按突出显示并删除 highlight2 declation。

Use global variable to let the scope of highlight to cross two script, then replace highlight2 by highlight and remove highlight2 declation.

请参见 jsfiddle ，我想这就是你想要的。

See jsfiddle here, I think this is what you want.

这篇关于JQVMAP选择的区域使用JSFIDDLE Demo取消选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！