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

我遇到的其他事情：'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
    });
});

Answer 2

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

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

不是（不再是？）regionMouseOut

jVectorMap在onRegionClick上更改颜色

2 个答案: