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

Question

我一直在制作类似于此示例的地图，单击该地图时可以一次选择多个国家/地区。 我把它添加到世界地图中，但我想改变它，这样当点击一次时，国家会变成蓝色，当点击两次时，国家会变成红色，当第三次点击时，它会变成未被选中。 以我目前的工作，当一个国家被点击两次时，它只会在移动到另一个国家后显示为红色。 我是否未正确设置所选颜色？ 我已经查看了文档和更多示例，但无法找到解决方案。任何帮助将不胜感激。 这是我到目前为止所拥有的。

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中使用哪种颜色，然后最终通过将showAsSelected设置为 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>