切換點擊區域的選定顏色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。

至於採摘的顏色使用，你會想設定某種跟蹤通過設置showAsSelected多少倍面積已被點擊，以確定最終取消之前在selectedColor使用哪種顏色自定義屬性的這假的，並呼籲該地區的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>