7

わかりました、検索ボックスの州を選択するために自分のサイトにあるJQVMAPがあります。Clear 関数を追加するまで、すべてがうまくいきました。

また、メンバー 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

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 に答える