如何使用image-mapster更新Visual Studioasp.net核心mvc中的<area>标签？

如何解决如何使用image-mapster更新Visual Studioasp.net核心mvc中的<area>标签？

我已映射到一个视图中包含多个图像的图像。加载页面后，区域标记会按照我想要的方式工作，但是在更改时，我有一个地方，其中包含通过jquery更改的新信息的更新。当我更改并选择所需的标记时，它不会更改任何标记，相反，地图所做的是取消选择我通过jquery更改的标记。请遵循以下代码：

控制器功能：

public IActionResult MostrarMapa()
        {
            ViewData["Cidade"] = "Livramento de Nossa Senhora";
            return View();
        }

选择：

<select id="myselect" onchange="pintarpoly()">
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

图像和区域地图：

<img src="https://gartic.com.br/imgs/mural/si/sinistrus/livre_1261907513.png" id="map" usemap="#image-map">

<map name="image-map">
    <area target="" alt="" id="1" class="green" title="" href="#" coords="158,91,159,167,240,91" shape="poly">
    <area target="" alt="" id="2" class="a" title="" href="#" coords="242,243,168,327,166,91" shape="poly">
    <area target="" alt="" id="3" class="red" title="" href="#" coords="158,158,244,239,246,170" shape="poly">
    <area target="" alt="" id="4" class="b" title="" href="#" coords="241,245,241,325,328,244" shape="poly">
</map>

生成地图：

var map = $('#map');
    map.mapster({
        mapKey: 'class',stroke: true,strokeWidth: 0.5,strokeColor: '000000',areas: [{
            key: 'red',staticState: true,render_select: {
                fillOpacity: 0.7,fillColor: 'ff0000'
            }
        },{
            key: 'green',fillColor: '00ff00'
            }
        },{
            key: 'blue',fillColor: '0000ff'
            }
        },{
            key: 'orange',fillColor: 'ffa500'
            }
        }
        ],isSelectable: false
    })
        .mapster('snapshot')
        .mapster('rebind',{
            mapKey: 'class',isSelectable: false
        },true);

更改地图的功能：

function pintarpoly() {

        if ($('#myselect').val() == '1') {
            $('#1').attr('class','orange');
            $('#2').attr('class','blue');
            $('#3').attr('class','green');
            $('#4').attr('class','red');
            map.mapster('rebind');
}

我已经尝试将图像和地图定义为局部视图，并在每次更改时进行更新。我还尝试更新图像和地图所属的div。但是没有一个很好。

PS：正确调用了包含jquery和image-mapster的脚本。数据目前是静态的，仅供测试。

解决方法

这是一个工作示例，如下所示：

查看：

<select id="myselect" onchange="pintarPoly()">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<img src="https://gartic.com.br/imgs/mural/si/sinistrus/livre_1261907513.png" id="map" usemap="#image-map">

<map name="image-map">
    <area target="" alt="" id="1" class="green" title="" href="#" coords="158,91,159,167,240,91" shape="poly">
    <area target="" alt="" id="2" class="a" title="" href="#" coords="242,243,168,327,166,91" shape="poly">
    <area target="" alt="" id="3" class="red" title="" href="#" coords="158,158,244,239,246,170" shape="poly">
    <area target="" alt="" id="4" class="b" title="" href="#" coords="241,245,241,325,328,244" shape="poly">
</map>

脚本：

@section Scripts
{
    <script src="https://cdn.jsdelivr.net/npm/jquery-imagemapster@1.2.10/dist/jquery.imagemapster.min.js"></script>
    <script>
        var map = $('#map');
        var options = {
            mapKey: 'class',stroke: true,strokeWidth: 0.5,strokeColor: '000000',areas: [{
                key: 'red',staticState: true,render_select: {
                    fillOpacity: 0.7,fillColor: 'ff0000'
                }
            },{
                key: 'green',fillColor: '00ff00'
                }
            },{
                key: 'blue',fillColor: '0000ff'
                }
            },{
                key: 'orange',fillColor: 'ffa500'
                }
            }
            ],isSelectable: false
        };

        map.mapster(options); //change this...

        function pintarPoly() {

            if ($('#myselect').val() == '1') {
                $('#1').attr('class','orange');
                $('#2').attr('class','blue');
                $('#3').attr('class','green');
                $('#4').attr('class','red');

                map.mapster('rebind',options);  //change this...
                    
            }
        }
    </script>
}

结果：