jVectorMap 通过单击最多更改 2 个区域的颜色

Question

有人可以帮助我使用 jVectorMap 最多选择 2 个区域吗？区域颜色有 2 个选项，可以是绿色，也可以是红色。一次只能有一个区域为绿色，红色区域也一样。因此，一个区域为绿色，一个区域为红色。如果我点击绿色区域，它应该变成正常区域颜色，例如（#ccc），就像所有其他区域一样，当我点击红色区域时，也会发生同样的情况。如果我在存在红色和绿色区域的任何 #ccc 区域中单击，则不会发生任何事情。但是，如果我在没有绿色或红色区域的情况下单击 #ccc 区域，则单击的区域必须变为绿色或红色。这是我想添加到 jVectorMap 的函数示例，您可以复制并粘贴到您的 html 中进行检查。

<style>
    .no_color_toggle{ float:left; margin:10px; background:#ccc; width:50px; height:50px; cursor:pointer; }
    .green_color_toggle{ float:left; margin:10px; background:green; width:50px; height:50px; cursor:pointer; }
    .red_color_toggle{ float:left; margin:10px; background:red; width:50px; height:50px; cursor:pointer; }
</style>
<script>
function toggleClass(el){
    var kids = document.getElementById('menu1').children;
    var num_toggle_g = document.getElementsByClassName("green_color_toggle").length;
    var num_toggle_p = document.getElementsByClassName("red_color_toggle").length;
    if(el.className == "no_color_toggle"){
        if( num_toggle_g == 0){
            el.className = "green_color_toggle";
        }else if( num_toggle_g == 1 && num_toggle_p ==0){
            el.className = "red_color_toggle";
        }
    }else if (el.className == "green_color_toggle"){
        el.className = "no_color_toggle";
    }else if (el.className == "red_color_toggle"){
        el.className = "no_color_toggle";
    }
}
</script>
<div id="menu1">
    <p>This is just an example, pretend that each block is a country in jVectorMap. What I want is to do the same logic as this for the world map</p>
    <div class="green_color_toggle" onclick="toggleClass(this)"></div>
    <div class="no_color_toggle" onclick="toggleClass(this)"></div>
    <div class="no_color_toggle" onclick="toggleClass(this)"></div>
    <div class="red_color_toggle" onclick="toggleClass(this)"></div>
</div>

Answer 1

内置的 jVectorMap 选择不能用于此任务，因为 regions 和 markers 是 JavaScript 个对象（ not arrays) ，所以不能保证选择顺序是正确的。在 click 处理程序中设置自定义选择会简单得多。

因此，您需要实现自己的选择数组。为此，只需添加两个包含您的数据的自定义参数。 selection 标准背后的逻辑也很容易实现，如果您存储该选择序列。

这是一个例子：

$(function() {

  function setSelection(code) {
    var a = 'fill', p = this.params, 
      colors = p.selectedColors, regions = p.travelRegions,
      initial = p.regionStyle.initial[a];
    var e = this.series.regions[0].elements[code].element,
      shape = e.shape, status = e.config.style.selected;
                                        
    var i = colors.indexOf(status[a]);
    switch(i) {
      case 0:
      case 1: 
        regions[i] = ''; status[a] = initial;
        break;
      default:
        switch(true) {
          case regions[0] == '' && regions[1] == '':
          case regions[0] == '' && regions[1] != '':
            regions[0] = code; status[a] = colors[0];
            break;
          case regions[0] != '' && regions[1] == '':
            regions[1] = code; status[a] = colors[1];
            break;
          default:; /* departure & arrival already selected */
        }
    }
    shape.updateStyle();
    for(var n=0; n<regions.length; n++) {
      if(regions[n] != '') this.setSelectedRegions(regions[n]);
    }                
  }

  var worldMap = new jvm.Map({
    map: 'world_mill_en',
    container: $('#world-map'),
    zoomOnScroll: true,
    backgroundColor: 'aliceblue', 
    travelRegions: ['',''],
    selectedColors: ['#ff0000', '#00ff00'],
    series: {regions: [{values: {}}]}, 
    onRegionClick: function(e, code) {
      setSelection.call(worldMap, code);
    }
  });   
  
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>

<body>
  <div id="world-map" style="width: 600px; height: 400px"></div>
</body>

</html>

jVectorMap 通过单击最多更改 2 个区域的颜色

jVectorMap change color with click for 2 areas max

javascript

bundle

jvectormap