2012-04-09 52 views
1

我剛開始使用jVectorMap。我希望能夠通過點擊選擇國家,並保持選定的國家有顏色,直到用戶選擇一個新的國家。無法弄清楚我在這裏做錯了什麼?jVectorMap改變onRegionClick的顏色

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

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

回答

2

我碰到了我懷疑是同樣的問題。我像你一樣設置顏色,但這種顏色不會持續。事實證明,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 
    }); 
}); 
0

有點晚了,但是對於那些仍在尋找(像我一樣)the event is called

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

這不是(?不再)regionMouseOut