Maphilight() 在放大/缩小图像地图后停止正常工作

Posted 2023-05-08

【中文标题】Maphilight() 在放大/缩小图像地图后停止正常工作

【英文标题】：Maphilight() stops working correctly after zoom in/out of imagemap

【发布时间】：2018-11-02 07:28:52

【问题描述】：

我有一个包含 300-400 个多边形区域的图像映射，在“onclick”事件中应该突出显示该区域并获取一些数据等...当页面加载时（我的图像有点大，3-5MB）所以我调整了大小那些使用davidjbradshaw/image-map-resizer 插件的图像映射。当我开始实施高亮方法时，一切正常，但在放大/缩小图像后，我的多股线弄乱了。如果我删除突出显示选项并放大/缩小我的多边形线将调整为适当的图像尺寸。

调整大小的 JS 代码（正常工作）

 $( document ).ready(function() 
    imageMapResize();
  );

  function ZoomIn () 
    $("img").animate(
      height: '+=200',
      width: '+=200'
    , 1000, function() 
      imageMapResize();
    );    
  

  function  ZoomOut () 
    $("img").animate(
      height: '-=200',
      width: '-=200'
    , 1000, function() 
      imageMapResize();
    );
  

用于调整大小/突出显示的 JS 代码（无法正常工作）

$( document ).ready(function() 
    imageMapResize();
    $('img[usemap]').maphilight();
  );

  function ZoomIn () 
    $("img").animate(
      height: '+=200',
      width: '+=200'
    , 1000, function() 
      imageMapResize();
      $('img[usemap]').maphilight();
    );
  

  function  ZoomOut () 
    $("img").animate(
      height: '-=200',
      width: '-=200'
    , 1000, function() 
      imageMapResize();
      $('img[usemap]').maphilight();
    );
  

没有放大/缩小图像调整器和突出显示效果完美。

放大/缩小后

我做错了什么？

【参考方案1】：

我做错了什么？

什么都没有，我可以看到代码。

我认为问题出在jQuery.maphilight() 插件本身，它显然不支持响应式缩放yet。

因此，与其尝试修复问题/问题，或者等待作者修复它，您可能需要考虑使用jQuery.mapster()。

工作示例

$( document ).ready(function() 
  $('img[usemap]').mapster(
    fill: true,
    fillColor: '000000',
    fillOpacity: 0.2,
    stroke: true,
    strokeColor: 'ff0000',
    strokeOpacity: 1,
    strokeWidth: 1,
    fade: true
  );
);

function ZoomIn() 
  $("img").animate(
    height: '+=200',
    width: '+=200'
  , 1000, function() 
    $(this).mapster('resize', $(this).width(), $(this).height());
  );


function ZoomOut() 
  $("img").animate(
    height: '-=200',
    width: '-=200'
  , 1000, function() 
    $(this).mapster('resize', $(this).width(), $(this).height());
  );

演示：http://jsfiddle.net/mt5pynn8/ 演示：http://jsfiddle.net/mt5pynn8/1/

附加说明

jQuery.mapster() 不支持 jQuery 版本 3，其次，该插件最后一次更新是在 2013 年..（但它仍然很好用。）

更新

jQuery.mapster() 带有调整大小功能；因此imageMapResize() 不是必需的。但请注意，调整大小功能在我测试过的情况下不是完美。 imageMapResize() 和 jQuery.mapster() 都不是。