如何使用 image-mapster 更新 visual studio (asp.net core mvc) 中的 <area> 标签？

Question

我有一个映射到一个包含多个视图的图像。加载页面时，区域标记按我想要的方式工作，但是我有一个更改位置，更新了我通过 jquery 更改的新信息。当我更改并选择我想要的时，它不会更改任何标记，相反，地图只是取消选择我通过 jquery 更改的。遵循代码：

控制器函数：

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

Select:

<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,167,240,91" shape="poly">
    <area target="" alt="" id="2" class="a" title="" href="#" coords="242,91,243,168,327,166,327,91" shape="poly">
    <area target="" alt="" id="3" class="red" title="" href="#" coords="158,167,158,244,239,246,239,170" shape="poly">
    <area target="" alt="" id="4" class="b" title="" href="#" coords="241,245,241,168,325,168,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',
            staticState: true,
            render_select: {
                fillOpacity: 0.7,
                fillColor: '00ff00'
            }
        },
        {
            key: 'blue',
            staticState: true,
            render_select: {
                fillOpacity: 0.7,
                fillColor: '0000ff'
            }
        },
        {
            key: 'orange',
            staticState: true,
            render_select: {
                fillOpacity: 0.7,
                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。但是 none 效果很好。

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

Answer 1

这是一个像下面这样的工作演示：

查看：

<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,167,240,91" shape="poly">
    <area target="" alt="" id="2" class="a" title="" href="#" coords="242,91,243,168,327,166,327,91" shape="poly">
    <area target="" alt="" id="3" class="red" title="" href="#" coords="158,167,158,244,239,246,239,170" shape="poly">
    <area target="" alt="" id="4" class="b" title="" href="#" coords="241,245,241,168,325,168,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',
                staticState: true,
                render_select: {
                    fillOpacity: 0.7,
                    fillColor: '00ff00'
                }
            },
            {
                key: 'blue',
                staticState: true,
                render_select: {
                    fillOpacity: 0.7,
                    fillColor: '0000ff'
                }
            },
            {
                key: 'orange',
                staticState: true,
                render_select: {
                    fillOpacity: 0.7,
                    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>
}

结果：

如何使用 image-mapster 更新 visual studio (asp.net core mvc) 中的 <area> 标签？

how to update the <area> tag in visual studio (asp.net core mvc) with image-mapster?

jquery

asp.net-mvc

visual-studio

asp.net-core

imagemapster