谁能帮助我用jVectorMap来选择最多2个区域。区域颜色有2个选项，可以是绿色，也可以是红色。每次只能有一个区域是绿色的，红色区域也是一样。所以，一个区域是绿色的，一个区域是红色的。如果我点击绿色区域，它应该变成正常的区域颜色，例如(#ccc)和其他所有区域一样，当我点击红色区域时，也会发生同样的情况，如果我点击任何#ccc区域，同时存在红色和绿色区域，什么都不会发生。但如果我在没有绿色或红色区域的情况下点击#ccc区域，则被点击的区域必须变成绿色或红色区域。
<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>
内置的jVectorMap选择不能用于这个任务，因为 地区 和 记号笔 是JavaScript对象（不是数组），所以不能保证选择序列是正确的。要想在 click 处理程序。
所以，你需要实现你自己的选择数组。要做到这一点，只需添加两个包含你的数据的自定义参数。选择数组背后的逻辑是 选择 criterias也将是非常简单的实现，如果你存储该选择序列。
下面是一个例子。
$(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/[email protected]/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/[email protected]/jquery-jvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
</body>
</html>