javascript - jVectorMap 在 onRegionClick 处改变颜色

Question

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

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

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

Answer 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);
    }
});

我遇到的其他问题:“代码”作为字符串而不是 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
    });
});