jVectorMap 在 onRegionClick 改变颜色答案

【问题标题】：jVectorMap change color at onRegionClickjVectorMap 在 onRegionClick 改变颜色
【发布时间】：2013-08-08 17:13:51
【问题描述】：

我刚开始使用jVectorMap。我希望能够通过单击选择国家并保持所选国家的颜色，直到用户选择一个新国家。无法弄清楚我在这里做错了什么？

$(function () {
    function showSelectedCountry(event, code) {
        viewModel.selectedCountry(code);
        $('#map').vectorMap('set', 'colors', {code: '#f00' });
    }

    $('#map').vectorMap({
        hoverColor: '#f00',
        backgroundColor: '#C8C8C8',
        onRegionClick: showSelectedCountry
    });
});

【问题讨论】：

标签： javascript jvectormap

【解决方案1】：

我遇到了我怀疑是同样的问题。我像你一样设置颜色，但这种颜色不会持久。事实证明 regionMouseOut 正在将“选定”颜色重置为其原始值。尝试阻止您选择的国家/地区对 regionMouseOut 的默认操作，或者在鼠标移出时再次设置颜色（我只能让后者为我工作）。

// Prevent selected country colour being changed on mouseOut event 
$('#map').bind('regionMouseOut.jvectormap', function(event, code){
    if( code == selectedCountry ) {
        var data = {};
        data[code] = "#0000ff";
        $("#map").vectorMap("set", "colors", data);
    }
});

我遇到的其他问题：'code' 作为字符串而不是 var 值传递。您可能需要稍微修改您的原件：

$(function () {
    function showSelectedCountry(event, code) {
        viewModel.selectedCountry(code);
        var data = {};
        data[code] = "#f00";            
        $('#map').vectorMap('set', 'colors', data);
    }

    $('#map').vectorMap({
        hoverColor: '#f00',
        backgroundColor: '#C8C8C8',
        onRegionClick: showSelectedCountry
    });
});

【讨论】：

【解决方案2】：

有点晚了，但对于那些仍在搜索的人（就像我一样）the event is called

onRegionOver: function(e,code){e.preventDefault();}

不是（不再是？）regionMouseOut

【讨论】：