7

好的，我在我的网站上有一个JQVMAP ，可以为搜索框选择状态。一切都很好，直到我添加了我的清除功能。

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

我的问题是：

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

更新

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

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

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

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

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

JSFIDDLE 演示

4

2 回答 2

4

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

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

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

于 2015-06-11T05:00:10.270 回答
3

我刚刚将此功能添加到库中

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');
于 2015-07-23T00:26:05.887 回答