Javascript jVectorMap最多可点击2个区域更改颜色

有人能帮我用jVectorMap最多选择两个区域吗？区域颜色有两个选项，可以是绿色，也可以是红色。一次只能有一个区域是绿色的，红色区域也是绿色的。因此，一个区域为绿色，一个区域为红色。 如果我在绿色区域中单击，它应该成为正常区域颜色，例如（#ccc），与所有其他区域一样，当我在红色区域中单击时也会发生同样的情况。 如果我在红色和绿色区域中单击任何#ccc区域，则不会发生任何事情。但如果我在一个#ccc区域中单击，而没有绿色或红色区域，则单击的区域必须变为绿色或红色。 下面是我想添加到jVectorMap的函数的一个示例，您可以复制并粘贴到html中进行检查

<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>

.no_color_toggle{float:左；边距：10px；背景：ccc；宽度：50px；高度：50px；光标：指针；}
.green_color_切换{浮点：左；边距：10px；背景：绿色；宽度：50px；高度：50px；光标：指针；}
.red_color_切换{浮点：左；边距：10px；背景：红色；宽度：50px；高度：50px；光标：指针；}
函数切换类（el）{
var kids=document.getElementById（'menu1'）.children；
var num_toggle_g=document.getElementsByClassName（“绿色_颜色_toggle”）.length；
var num_toggle_p=document.getElementsByClassName（“红色_颜色_toggle”）.length；
如果（el.className==“无颜色切换”）{
if（num_toggle_g==0）{
el.className=“绿色\颜色\切换”；
}else if（num\u toggle\u g==1&&num\u toggle\u p==0）{
el.className=“红色\颜色\切换”；
}
}else if（el.className==“绿色\u颜色\u切换”）{
el.className=“无颜色切换”；
}else if（el.className==“红色\u颜色\u切换”）{
el.className=“无颜色切换”；
}
}
这只是一个例子，假设每个区块都是jVectorMap中的一个国家。我想要的是对世界地图执行与此相同的逻辑

内置的jVectorMap选择不能用于此任务，因为区域和标记是JavaScript对象（而不是数组），因此不能保证选择序列是正确的。在

click

处理程序中设置自定义选择会简单得多

因此，您需要实现自己的选择数组。为此，只需添加两个包含数据的自定义参数。如果存储选择序列，选择标准背后的逻辑也将非常容易实现

以下是一个例子：

$（函数（）{
功能选择（代码）{
变量a='fill'，p=this.params，
颜色=p.选定颜色，区域=p.旅行区域，
首字母=p.regionStyle.首字母[a]；
var e=this.series.regions[0]。元素[code]。元素，
shape=e.shape，status=e.config.style.selected；
var i=颜色。indexOf（状态[a]）；
开关（一）{
案例0：
案例1：
地区[i]=''；状态[a]=初始；
打破
违约：
开关（真）{
案例区域[0]=''&&区域[1]=''：
案例区域[0]=''&&区域[1]！=''：
区域[0]=代码；状态[a]=颜色[0]；
打破
案例区域[0]！=''&&区域[1]=''：
区域[1]=代码；状态[a]=颜色[1]；
打破
默认值：；/*已选择出发和到达*/
}
}
shape.updateStyle（）；
对于（var n=0；n此任务不能使用内置的jVectorMap选择，因为区域和标记是JavaScript对象（而不是数组），因此不能保证选择序列是正确的。在
click
处理程序中设置自定义选择会简单得多

因此，您需要实现自己的选择数组。为此，只需添加两个包含数据的自定义参数。如果存储选择序列，选择标准背后的逻辑也将非常容易实现

以下是一个例子：


$（函数（）{
功能选择（代码）{
变量a='fill'，p=this.params，
颜色=p.选定颜色，区域=p.旅行区域，
首字母=p.regionStyle.首字母[a]；
var e=this.series.regions[0]。元素[code]。元素，
shape=e.shape，status=e.config.style.selected；
var i=颜色。indexOf（状态[a]）；
开关（一）{
案例0：
案例1：
地区[i]=''；状态[a]=初始；
打破
违约：
开关（真）{
案例区域[0]=''&&区域[1]=''：
案例区域[0]=''&&区域[1]！=''：
区域[0]=代码；状态[a]=颜色[0]；
打破
案例区域[0]！=''&&区域[1]=''：
区域[1]=代码；状态[a]=颜色[1]；
打破
默认值：；/*已选择出发和到达*/
}
}
shape.updateStyle（）；
对于（var n=0；n…单击的区域必须变为绿色或红色…您如何决定颜色？它就像一个旅行制造者，您可以选择您现在的位置和您将要去的位置。当然，您需要选择其中的两个，出发地点（绿色）和到达地点（红色）。在初始阶段，我们已经选择了一个绿色和一个红色，例如美国和墨西哥。如果用户单击绿色，绿色将变成#ccc，用户可以单击任何#ccc颜色使其变为绿色。如果用户同时单击绿色和红色，所有地图将变成#ccc颜色，如示例和下一个国家所示用户选择的内容将变为绿色，然后下面的内容将变为红色。明白了吗？好的，最后区域选择的顺序确实很重要，你需要同时存储该顺序，是吗？是的，很重要。用户可以选择美国绿色，墨西哥红色，这意味着该用户将从美国飞往墨西哥。如果用户选择