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

【问题标题】：JQVMAP selected regions deselect with JSFIDDLE Demo使用 JSFIDDLE Demo 取消选择 JQVMAP 选定区域
【发布时间】：2015-06-08 16:16:15
【问题描述】：

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

我的问题是：

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

更新

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

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

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

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

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

JSFIDDLE DEMO

【问题讨论】：

那个小提琴很难使用：它抱怨在 HTML 区域的任何编辑上都有 <script> 标签，外部 jqvmap 资源以错误的顺序加载（我在页面加载时看到 TypeError: jQuery.fn.vectorMap is not a function )，并且@HardCode 的补丁是否包含在您从 jqvmap.com 链接的脚本中？解决这些问题可能会产生更多帮助……
您可以直接访问我的页面@@transportunl.com 只需创建一个用户名和密码...任何内容，它都会带您进入我的搜索...它在左侧，无论是起点还是终点.. . 我会提供演示信用，但不确定有多少人想尝试...
所有内容都包含在我的网站上，它仍在开发中......所以完成后数据库将被清除。如果您需要查看带有选定状态的文本框...将隐藏字段更改为文本。它就在地图的正下方。
清除链接对我来说很好用。有什么问题？
点击清除链接后尝试选择另一个状态。它也会突出显示所有其他状态...

标签： javascript jquery jqvmap

【解决方案1】：

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

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

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

【讨论】：

highlight1 与 omap 原始地图和 highlight2 与 dmap 目标地图一起使用。它们是同一页面上的 2 个单独的地图。
你的 jsfiddle 工作正常......这就是我想要的
我也会在允许的情况下奖励积分。这是一个简单的修复。现在我只需要为 Origin 和 Destination 分开一个不同的变量，这就是为什么我将它作为局部变量。但会弄清楚的。
你现在成功了吗？如果您仍有任何问题，请询问。我没有看到你设计的网站更新。
我已将其整合到本地，我将在几分钟内将其推送。我只是复制了该功能并完全分离了亮点……还有一个小时我可以奖励积分

【解决方案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');

【讨论】：