3

プラグインjVectorMapを見つけ、選択した状態を異なる色でマークしようとしています

ホバーが発生するのと同じ方法ですが、私が望むのは、クリックすると、状態が色付きで「アクティブ」のままになることです。

プラグインには次のようなアクションがありますonRegionClick。

$('#map-teste').vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        alert(code); // return the state
    }
});

しかし、私はこれを行う方法がわかりません。

誰もこれを達成しますか？

4

2 に答える 2

4

regionStyle構成パラメーターをマップのインスタンス化に追加することで、選択した領域の色を設定できます。regionSelectableを trueに設定することもできます。

$('#map-teste').vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        alert(code); // return the state
    },
    regionsSelectable: true,
    regionStyle: {
        selected: {
            fill: 'orange'
        }
    }
});
于 2012-10-04T02:28:28.033 に答える
2

あなたはこれを行うことができます：

$('#map-teste').vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        $('#map-teste').vectorMap('set', 'colors', code, '#000000');
        alert(code); // return the state
    }
});

私にとってはうまくいきます。これにより、切り替えなしで複数の選択が可能になります。「単一選択」効果のために「トグル」する必要がある場合は、次のように行うことができます。

currentSelected = '';
defaultColor = '#00FF00';
selectedColor = '#FF00FF'; 
maphandle = $('#map-teste'); 

maphandle.vectorMap({
    map: 'br_en',
    onRegionClick: function(event, code){
        if(currentSelected !== code) {
            if(currentSelected !== ''){
                // Deselect, then select new choice
                maphandle.vectorMap('set', 'colors', currentSelected, defaultColor);
                maphandle.vectorMap('set', 'colors', code, selectedColor);
                currentSelected = code;
            } else {
                // Nothing currently selected, go ahead and select
                maphandle.vectorMap('set', 'colors', code, selectedColor);
                currentSelected = code;
            }
        } else {
            // Deselect
            maphandle.vectorMap('set', 'colors', code, defaultColor);
            currentSelected = '';
        }
        alert(code); // return the state
    }
});

お役に立てば幸いです。:)

于 2012-07-19T04:42:38.497 に答える