单击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中使用的颜色将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>