JS JQVMap hovercolor regions

Question

저는 JS에 익숙하지 않고 어떻게 작동하는지 알지 못합니다. 나는 그들 중 하나가 마우스에 의해 맴돌다면 여러 지역을 색칠하려고합니다. 모든 지역을 하나로 모으기 위해 스위치 케이스를 사용하고 있습니다. 그리고 지금까지 작동하는 것 같습니다. 왜냐하면 제가 테스트 라인을 꺼내기 때문입니다. 나는 여기서 아주 작은 것을 놓치고 있다고 확신한다. 어떤 도움을 주셔서 감사합니다!

jQuery(document).ready(function() { 
    var red = '#E20079', blue = '#009EE0', yel = '#FFFA00'; 
    jQuery('#vmap').vectorMap({ 
     map: 'usa_en', 
     backgroundColor: '#383838', 
     enableZoom: false, 
     showTooltip: true, 
     selectedColor: null, 
     onRegionOver: function(event, code, region){    
      switch(code) { 
       case 'wa': case 'or': case 'ca': case 'nv': case 'id': 
       case 'mt': case 'wy': case 'ut': case 'az': case 'nm': 
       case 'co': case 'ne': case 'ks': case 'sd': case 'nd': 
       case 'mn': case 'wi': case 'ia': case 'il': case 'ak': 
       case 'hi': 
        //this output is working fine 
        document.getElementById("demo").innerHTML = code; 
        //but it won't change the color!! 
        hoverColor: 'blue'; 
        break; 
       case 'mo': case 'ok': case 'tx': case 'ar': case 'la': 
       case 'ms': case 'al': case 'ga': case 'fl': case 'tn': 
       case 'ky': case 'sc': case 'in': case 'sc': 
        hoverColor: 'yel'; 
        break; 
       case 'mi': case 'oh': case 'nc': case 'va': case 'wv': 
       case 'pa': case 'de': case 'nj': case 'ny': case 'ct': 
       case 'ri': case 'ma': case 'vt': case 'nh': case 'me': 
       case 'md': case 'dc': 
        hoverColor: 'red'; 
        break; 
      } 
     }, 
     onRegionClick: function(code){ 
      switch(code) { 
       case 'wa': case 'or': case 'ca': case 'nv': case 'id': 
       case 'mt': case 'wy': case 'ut': case 'az': case 'nm': 
       case 'co': case 'ne': case 'ks': case 'sd': case 'nd': 
       case 'mn': case 'wi': case 'ia': case 'il': case 'ak': 
       case 'hi': 
        window.open("http://www.google.com"); 
        break; 
       case 'mo': case 'ok': case 'tx': case 'ar': case 'la': 
       case 'ms': case 'al': case 'ga': case 'fl': case 'tn': 
       case 'ky': case 'sc': case 'in': case 'sc': 
        window.open("http://www.yahoo.com"); 
        break; 
       case 'mi': case 'oh': case 'nc': case 'va': case 'wv': 
       case 'pa': case 'de': case 'nj': case 'ny': case 'ct': 
       case 'ri': case 'ma': case 'vt': case 'nh': case 'me': 
       case 'md': case 'dc': 
        window.open("http://www.example.com"); 
        break;     
      } 
     } 
    }); 
}); 

Answer 1

약간의 중복성이있는 코드를 리팩토링했습니다.

jQuery(document).ready(function() { 
    // Group the codes of each state in the desired macro-areas 
    var areas = [['wa','or','ca','nv','id','mt','wy','ut','az','nm','co','ne','ks','sd','nd','mn','wi','ia','il','ak','hi'], 
       ['mo','ok','tx','ar','la','ms','al','ga','fl','tn','ky','sc','in'], 
       ['mi','oh','nc','va','wv','pa','de','nj','ny','ct','ri','ma','vt','nh','me','md','dc']], 
     // Assign links to areas 
     links = {0: "http://www.google.com", 1: "http://www.yahoo.com", 2: "http://www.example.com"}, 
     // Define colors 
     red = '#E20079', blue = '#009EE0', yel = '#FFFA00', 
     // Assign colors to areas 
     colors = {0: blue, 1: yel, 2: red}, 
     // Prepare container for hover colors 
     hoverColors = {}; 
    (function() { 
    // Build a ready-to-use hoverColors list 
    areas.forEach(function(members, area) { 
     members.forEach(function(state) { 
     hoverColors[state] = colors[area]; 
     }); 
    }); 
    })(); 
    // Used in mouse enter and mouse leave handlers 
    function toggleAreaHiglight(code, action){ 
    var vMap = $('#vmap'); 
    areas.forEach(function(members) { 
     if(members.indexOf(code)>-1) { 
     members.forEach(function(state) { 
      if(state != code) vMap.vectorMap(action, state); 
     }); 
     } 
    }); 
    } 
    // Initialize the map 
    $('#vmap').vectorMap({ 
    map: 'usa_en', 
    backgroundColor: '#383838', 
    enableZoom: false, 
    showTooltip: true, 
    selectedColor: null, 
    hoverColors: hoverColors, 
    onRegionOver: function(event, code, region){ 
     toggleAreaHiglight(code, 'highlight'); 
    }, 
    onRegionOut: function(event, code, region){ 
     toggleAreaHiglight(code, 'unhighlight'); 
    }, 
    onRegionClick: function(event, code, region){ 
     var link = links[$(areas).map(function(i) { 
     if(this.indexOf(code)>-1) return i; 
     })[0]]; 
     if(link) window.open(link); 
    } 
    }); 
}); 

두 부분이 있습니다 약간의 설명이 필요가있는 :

• hoverColors을 : 난 그냥 사전에 가 포함 개체를 준비하고있어 다음과 같이

  내 제안이다 상태의 코드와 필요한 호버 색 사이의 연관성. 결과는 다음과 같습니다

  { 
      ak: "#009EE0", 
      al: "#FFFA00", 
      ar: "#FFFA00", 
      ... all other states 
      wv: "#E20079", 
      wy: "#009EE0" 
  } 
  

• toggleAreaHighlight : 토글 하이라이트 기능에 현재의 지역 코드를 건너 뛰는 이유는 무엇입니까?

  if(state != code) $('#vmap').vectorMap(action, state); 
  

  강조 이미 내장되어 마우스 포인터 아래의 현재 상태 (지역)을 해제 강조하고, 그래서, 그러므로, 두 번 처리 할 필요가 없다. BTW

, 추가 참고 : 두 번째 지역에

, 당신은 사우스 캐롤라이나 두 번 선언, 어쩌면 이것은 오타이지만, 어쨌든, 불쾌한 부작용을 방지하기 위해, 각 코드 반드시이어야합니다.