JQVMAP选择的区域如何在JSFIDDLE演示中取消选择

Question

JQVMAP选择的区域如何在JSFIDDLE演示中取消选择

7

我在我的网站上安装了一个JQVMAP，用于为搜索框选择州。一切都很顺利，直到我添加了清除功能。

我还不得不加入成员HardCode的修补程序：链接到修补程序

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

我的问题是：

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

更新：

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

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

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

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

这是我的jsFiddle，您可以查看发生了什么：

JSFIDDLE演示

- Big Al Ruby Newbie

那个小提琴很难操作：每次编辑HTML区域时都会抱怨<script>标签，外部jqvmap资源加载顺序错误（在页面加载时看到“TypeError：jQuery.fn.vectorMap不是函数”），还有@HardCode的补丁包含在你从jqvmap.com链接的脚本中吗？修复这些问题可能会产生更多的帮助... - Honore Doktorr

你可以直接访问我的页面：http://www.transportunl.com，只需创建一个用户名和密码即可。它会带你到我的搜索页面，左侧有起点和终点选项。我本想提供演示凭据，但不确定有多少人愿意尝试。 - Big Al Ruby Newbie

所有东西都已经整合到我的网站上了，但它仍在开发中...所以数据库将在完成时被清除。如果您需要查看带有选定州的文本框...请将隐藏字段更改为文本。它就在地图下方。 - Big Al Ruby Newbie

清除链接对我来说运行良好。问题出在哪里？ - Anthony

点击清除链接后，请尝试选择另一个州。它将突出显示所有其他州... - Big Al Ruby Newbie

2个回答

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

- Oleksii Kyslytsyn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- North · Accepted Answer

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

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

查看这里的jsfiddle，我认为这是你想要的。