匹配两个不同数组中的两个项目答案

【问题标题】：Matching two items in two different arrays匹配两个不同数组中的两个项目
【发布时间】：2018-11-15 21:47:52
【问题描述】：

我正在使用 Jvectormap 并将数组设置为“区域”以将国家/地区分组在一起以进行选择，这很有效。下一步是为数组中的每个国家/地区指定颜色。所以我可以为每个数组中的每个国家/地区定义不同的颜色。

UK 在数组 1 中可能是粉红色，但在数组 2 中可能是绿色。

还有我如何分配给点击功能：

$("#mp-cyprus-A").click(function(){
    $('#world-map').vectorMap('setSelectedRegions', ['areas[1]']);
});

添加区域集然后为每个区域添加颜色集的代码：

  //MAP CONTROLS
$(function(){
  var areas = [];
  areas[0] = [];
  areas[2] = ["FR","BG","DK","HR","DE","BA","XK","CH","EE","IS","AL","IT","CZ","GB","IE","ES","ME","MD","RO","RS","MK","SK","SI","UA","SE","AT"];
  areas[2] = ["BE","FR","BG","DK","HR","DE","BA","HU","FI","BY","GR","NL","PT","NO","LV","LT","LU","XK","CH","EE","IS","AL","IT","CZ","GB","IE","ES","ME","MD","RO","RS","MK","SK","SI","UA","SE","AT"];
  areas[3] = ["CA"];
  areas[4] = ["CA"];
  areas[5] = ["CA"];
  areas[6] = ["CA"];

  function selectArea(code){
    var mapObj = $("#world-map").vectorMap("get", "mapObject");
    areas.forEach(function(area) {
      if(area.indexOf(code)>-1) {
        mapObj.setSelectedRegions(area);
        return;
      }
    });
  }

  function clearAll(){
    var mapObj = $("#world-map").vectorMap("get", "mapObject");
    mapObj.clearSelectedRegions();
  }

部分代码不起作用：为每个“区域”设置数组。并应用“areas”和“areacolor”之间的对应数组。

   // Area Colors
      var areacolor = [];
        areacolor[0] = [
            {'BE': '#4E7387'},
            {'FR': '#333333'},
            {'BG': '#89AFBF'},
            {'DK': '#817F8E'},
            {'HR': '#344B5E'},
            {'FI': '#344B5E'},
            {'BY': '#344B5E'},
            {'GR': '#344B5E'}
        ]
        areacolor[1] = [
            {'BE': '#4E7387'},
            {'FR': '#333333'},
            {'BG': '#89AFBF'},
            {'DK': '#817F8E'},
            {'HR': '#344B5E'},
            {'FI': '#344B5E'},
            {'BY': '#344B5E'},
            {'GR': '#344B5E'}
        ]
        areacolor[2] = [
            {'BE': '#4E7387'},
            {'FR': '#333333'},
            {'BG': '#89AFBF'},
            {'DK': '#817F8E'},
            {'HR': '#344B5E'},
            {'FI': '#344B5E'},
            {'BY': '#344B5E'},
            {'GR': '#344B5E'}
        ]

        function selectArea(color){
            var mapObj = $("#world-map").vectorMap("get", "mapObject");
            areascolor.forEach(function(color) {
              if(color.indexOf(color)>-1) {
                map.series.regions[0].setValues(areacolor[0]);
                return;
              }

矢量地图初始化：

$('#world-map').vectorMap({
    map: 'world_mill',
    backgroundColor: '#5288F9',
    markersSelectable:'false',
    regionsSelectableOne: 'false',
    regionsSelectable: 'true',
    regionStyle: {
        initial: {
          fill: "lightgrey"
        },
        selected: {
          fill: "darkseagreen"
        }
      },
    onRegionClick: function(e, code){
        clearAll();
        selectArea(code);
        return false;
      }
    });

应用区域过滤器

    (function () {
      // Collect the rest of the World
      var mapObj = $("#world-map").vectorMap("get", "mapObject");
      var states = areas.join(",");
      for(var code in mapObj.regions) {
        if(mapObj.regions.hasOwnProperty(code)) {
          if(states.indexOf(code) == -1) {
            areas[0].push(code);
          }
        }
      }
    })();

});

更新：

//MAP CONTROLS
var areacolors0  = {
    'BE': '#4E7387',
    'FR': '#333333',
    'BG': '#89AFBF',
    'DK': '#817F8E',
    'HR': '#344B5E',
    'FI': '#344B5E',
    'BY': '#344B5E',
    'GR': '#344B5E'
  };
  var areacolors1 = {
    'BE': '#000000',
    'FR': '#333333',
    'BG': '#000000',
    'DK': '#817F8E',
    'HR': '#000000',
    'FI': '#344B5E',
    'BY': '#344B5E',
    'GR': '#344B5E'
  };
    $('#world-map').vectorMap({
        map: 'world_mill',
        backgroundColor: '#5288F9',
        markersSelectable:'false',
        regionsSelectableOne: 'false',
        regionsSelectable: 'true',
        regionStyle: {
            initial: {
              fill: "lightgrey"
            },
            selected: {
              fill: "darkseagreen"
            }
          },
          onRegionClick: function (event, code) {
            var map = $('#world-map').vectorMap('get', 'mapObject');
            var name = map.getRegionName(code);
            if(name == GR) {
            map.series.regions[0].setValues(areacolors.GR);      
            }
            if(name == CH) {
                map.series.regions[0].setValues(areacolors1.CH);         
                }


       },
});

【问题讨论】：

不确定您要完成什么。我看到了你的数组，但是你想在哪个数组中找到什么？
我还在函数中看到了对areascolor 的引用，但我看不到它的定义位置。我确实看到了areacolor。
认为在单击一个国家或一个按钮（链接到该国家）时更改区域颜色会更好。无需选择国家作为组。
不知道该怎么做。

标签： jquery jvectormap

【解决方案1】：

由于数据结构的复杂性，您需要进行更深入的迭代。所以你有：

Array [
  Array [
    Object {
      key: value
    }
  ]
]

所以要找到匹配特定值的项，需要迭代初始数组，迭代每个元素中的数组项，迭代矩阵中的每个对象。

我更喜欢使用jQuery$.each()，和.forEach()的思路一样。

var areacolor = [];
areacolor[0] = [{
    'BE': '#4E7387'
  },
  {
    'FR': '#333333'
  },
  {
    'BG': '#89AFBF'
  },
  {
    'DK': '#817F8E'
  },
  {
    'HR': '#344B5E'
  },
  {
    'FI': '#344B5E'
  },
  {
    'BY': '#344B5E'
  },
  {
    'GR': '#344B5E'
  }
]
areacolor[1] = [{
    'BE': '#4E7387'
  },
  {
    'FR': '#333333'
  },
  {
    'BG': '#89AFBF'
  },
  {
    'DK': '#817F8E'
  },
  {
    'HR': '#344B5E'
  },
  {
    'FI': '#344B5E'
  },
  {
    'BY': '#344B5E'
  },
  {
    'GR': '#344B5E'
  }
]
areacolor[2] = [{
    'BE': '#4E7387'
  },
  {
    'FR': '#333333'
  },
  {
    'BG': '#89AFBF'
  },
  {
    'DK': '#817F8E'
  },
  {
    'HR': '#344B5E'
  },
  {
    'FI': '#344B5E'
  },
  {
    'BY': '#344B5E'
  },
  {
    'GR': '#344B5E'
  }
];

function selectArea(color) {
  //var mapObj = $("#world-map").vectorMap("get", "mapObject");
  $.each(areacolor, function(k, ac) {
    console.log("Examine areacolor[" + k + "]");
    $.each(ac, function(i, area) {
      $.each(area, function(c, clr) {
        if (clr.indexOf(color) === 0) {
          console.log("Color Found: " + c + ", " + clr);
          //map.series.regions[0].setValues(areacolor[0]);
        }
      });
    });
  });
}

selectArea("#344B5E");

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

控制台会显示：

Examine areacolor[0]
Color Found: HR, #344B5E
Color Found: FI, #344B5E
Color Found: BY, #344B5E 
Color Found: GR, #344B5E
Examine areacolor[1]
Color Found: HR, #344B5E
Color Found: FI, #344B5E
Color Found: BY, #344B5E
Color Found: GR, #344B5E
Examine areacolor[2]
Color Found: HR, #344B5E
Color Found: FI, #344B5E
Color Found: BY, #344B5E
Color Found: GR, #344B5E

如果您只是为国家代码分配颜色，最好制作一个简单的对象：

var areacolors = {
  'BE': '#4E7387',
  'FR': '#333333',
  'BG': '#89AFBF',
  'DK': '#817F8E',
  'HR': '#344B5E',
  'FI': '#344B5E',
  'BY': '#344B5E',
  'GR': '#344B5E'
};

那么，如果你知道国家代码，你可以简单地称之为索引：

map.series.regions[0].setValues(areacolors.GR); // Dot Notation preferred

或者

map.series.regions[0].setValues(areacolor['GR']);

或者

var cc = "GR";
map.series.regions[0].setValues(areacolor[cc]);

我不熟悉你使用的这个插件，所以我不能说如何设置正确的值，我只是用你的例子来澄清我的观点。

希望这会有所帮助。

更新 1

您更新后的代码看起来是正确的。我会检查控制台是否有任何警报或错误。

还要考虑这个：

var areacolors = {
  'BE': '#000000',
  'FR': '#333333',
  'BG': '#000000',
  'DK': '#817F8E',
  'HR': '#000000',
  'FI': '#344B5E',
  'BY': '#344B5E',
  'GR': '#344B5E'
};

然后：

onRegionClick: function (event, code) {
  var map = $('#world-map').vectorMap('get', 'mapObject');
  var name = map.getRegionName(code);
  console.log("Name: " + name + ", Color: " + areacolors[name], map);
  map.series.regions[0].setValues(areacolors[name]);      
}

看起来你所有的颜色都是一样的，所以我没有看到多个数据集的好处。只用一个。此外，console.log() 函数对诊断问题也很有帮助。

【讨论】：

我认为您建议的最后一个选项是最好的。只需创建不同的数组并调用。我会玩的。非常感谢你，上面也教会了我一些东西。我会让你知道我是怎么过的。谢谢曲折
请检查上面的“更新”。我插了，没用。剧本好吗？
@happycoding 我没有看到 areacolors 在任何地方定义。我想你的意思是areacolors0