JS JQVMap hovercolor 区域

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

  在鼠标指针下高亮和取消高亮当前状态（区域）已经是内置的，因此无需处理两次。

顺便说一句，补充说明：

在您的第二个区域中，您两次声明 南卡罗来纳州，也许这是一个错字，但无论如何，为了避免讨厌的副作用，每个代码 必须仅在该地区一次。