JS JQVMap области наводнений

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, необходимо дополнительное примечание:

в вашей второй зоне, вы объявили Южной Каролине два раза, может быть, это опечатка, но в любом случае, чтобы избежать неприятных нежелательных побочных эффектов, каждый код должен быть только один раз в областях.