javascript - jQuery Maphilight 在关闭和重新打开模式后不起作用

Question

我正在开发一个 ASP.NET Core MVC 项目，其中我有一个Kendo UI 模态，并且在模态中我有一个建筑平面图的图像地图。

当我打开模式时，我需要突出显示某些区域，所以我使用了 jQuery Maphilight。一切正常，但是当我关闭并重新打开模式时，它不再突出显示该区域。它仅在我第一次打开模态时有效。

到目前为止，这就是我所拥有的：

  <button onclick="openModal()">Open Modal</button>
  <img class="mapImgSize mx-auto d-block mapImgSize" id="buildingMapImg" usemap="#buildingMap" />
  <map name="buildingMap" id="buildingMap">      
  <area shape="poly"  coords="200,97,220,98,220,94,219,91,216,89,214,88,213,85,213,81,213,71,201,70" data-mapster-key="0">
  </map>

function openModal() {
    var buildingMapModal = $("#BuildingMapModal").data("kendoWindow");
    $('#buildingMapImg').maphilight(
    {
       alwaysOn: true,
       fillColor: fillColor,
       fillOpacity: 0.5,
       stroke: true,
       strokeColor: strokeColor,
       strokeOpacity: 0.2,
       strokeWidth: 1,
    }
  );
 $('map').imageMapResize()
  buildingMapModal.center();
  buildingMapModal.open();
}

我没有上传Kendo UI Modal的代码，因为它与我之前附加的链接相同。

正如我所说，这仅在我第一次打开模式时才有效，因此我决定使用ImageMapster。我实际上有相同的代码，唯一改变的是 ImageMapster 选项参数。尝试 ImageMapster 并没有帮助我，没有突出鼠标悬停的任何区域。

这就是我所拥有的：

  <button onclick="openModal()">Open Modal</button>
  <img class="mapImgSize mx-auto d-block mapImgSize" id="buildingMapImg" usemap="#buildingMap" />
  <map name="buildingMap" id="buildingMap">
  <area shape="poly"  coords="200,97,220,98,220,94,219,91,216,89,214,88,213,85,213,81,213,71,201,70" data-mapster-key="0">
  </map>

function openModal() {
    var buildingMapModal = $("#BuildingMapModal").data("kendoWindow");
     $('#buildingMapImg').mapster({
         fillColor: 'ff0000',
         fillOpacity: 0.5,
         select: true,
     });
  buildingMapModal.center();
  buildingMapModal.open();
}

我也收到这6 个警告，包括 ImageMapster 的脚本。

我是第一次使用<map>and <area>。

现在唯一的问题是jQuery Maphilight当我关闭并重新打开模式时它不能正常工作，它不再突出显示该区域。它仅在我第一次打开模态时有效。

任何建议如何解决这个问题？

标签： javascriptjquerykendo-uiimagemapstermaphilight