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);
```
高亮和un-highlighting鼠标指针下的当前状态（区域）已经是built-in，所以，不需要处理两次。

顺便说一句，补充说明：

在你的第二个区域，你声明了两次 South Carolina，也许这是一个打字错误，但无论如何，为了避免讨厌的副作用，每个代码必须只在区域中出现一次。

JS JQVMap hovercolor 区域

JS JQVMap hovercolor regions

javascript

mousehover

jqvmap