在单击 amMap 时切换区域的选定颜色

Question

我一直在制作类似于this example 的地图，点击该地图可以一次选择多个国家/地区。我把它添加到世界地图上，但我想改变它，点击一次，国家会变成蓝色，点击两次，国家会变成红色，点击第三次，它会变成未选中状态。就我目前的工作而言，当一个国家被点击两次时，它只会在移动到另一个国家后才会显示为红色。我没有正确设置所选颜色吗？我查看了文档和更多示例，但找不到解决方案。任何帮助是极大的赞赏。这是我目前所拥有的。

var map = AmCharts.makeChart("chartdiv", {
  "type": "map",
  "theme": "light",
  "projection": "miller",

  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": false,
    "color": "#CDCDCD",
    "selectedColor": "#5EB7DE",
    "selectable": true
  },
  "listeners": [{
    "event": "clickMapObject",
    "method": function(event) {
      // deselect the area by assigning all of the dataProvider as selected object
      map.selectedObject = map.dataProvider;

      if (event.mapObject.showAsSelected == false || typeof event.mapObject.showAsSelected == 'undefined') {
        event.mapObject.showAsSelected = true;
      } else if (event.mapObject.showAsSelected == true && event.mapObject.selectedColorReal == "#5EB7DE") {
        event.mapObject.selectedColorReal = "#CC0000";
      } else {
        event.mapObject.showAsSelected = false;
        event.mapObject.selectedColorReal = "#5EB7DE"
        map.returnInitialColor(event.mapObject);
      }
    }
  }],
  "export": {
    "enabled": true,
    "position": "bottom-right"
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>

Answer 1

不要更新selectedColorReal，因为它是一个处理方式不同的内部属性，这解释了为什么你的颜色只有在你翻转时才会改变。改为设置区域的selectedColor。

至于选择使用哪种颜色，您需要设置某种自定义属性来跟踪某个区域被点击的次数，以确定在selectedColor 中使用哪种颜色，最后通过设置@取消选择它987654322@为false，调用区域的validate方法更新，例如：

  "listeners": [ {
    "event": "clickMapObject",
    "method": function( event ) {
      // deselect the area by assigning all of the dataProvider as selected object
      map.selectedObject = map.dataProvider;

      //define a custom click count property to store state
      //if not already defined
      if (event.mapObject.clickCount === undefined) {
        event.mapObject.clickCount = 0;
      }
      //increment click count
      ++event.mapObject.clickCount;

      //if we're not at the third click, maintain the showAsSelected 
      //state while updating the color
      if (event.mapObject.clickCount < 3) {
        event.mapObject.showAsSelected = true;
        event.mapObject.selectedColor = (event.mapObject.clickCount == 1 ? "#5EB7DE" : "#CC0000");
      }
      //otherwise, restore the initial color and reset the counter
      else {
        event.mapObject.clickCount = 0;
        event.mapObject.showAsSelected = false;
      }

      //update the area's color
      event.mapObject.validate();
    }
  } ],

var map = AmCharts.makeChart("chartdiv", {
  "type": "map",
  "theme": "light",
  "projection": "miller",

  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": false,
    "color": "#CDCDCD",
    "selectedColor": "#5EB7DE",
    "selectable": true
  },
  "listeners": [ {
    "event": "clickMapObject",
    "method": function( event ) {
      // deselect the area by assigning all of the dataProvider as selected object
      map.selectedObject = map.dataProvider;

      //define a custom click count property to store state
      //if not already defined
      if (event.mapObject.clickCount === undefined) {
        event.mapObject.clickCount = 0;
      }
      //increment click count
      ++event.mapObject.clickCount;

      //if we're not at the third click, maintain the showAsSelected 
      //state while updating the color
      if (event.mapObject.clickCount < 3) {
        event.mapObject.showAsSelected = true;
        event.mapObject.selectedColor = (event.mapObject.clickCount == 1 ? "#5EB7DE" : "#CC0000");
      }
      //otherwise, restore the initial color and reset the counter
      else {
        event.mapObject.clickCount = 0;
        event.mapObject.showAsSelected = false;
      }

      //update the area's color
      event.mapObject.validate();
    }
  } ],
  "export": {
    "enabled": true,
    "position": "bottom-right"
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>