问题描述
我已映射到一个视图中包含多个图像的图像。加载页面后,区域标记会按照我想要的方式工作,但是在更改时,我有一个地方,其中包含通过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>
}
结果: