图片地图缩放后Maphilight高亮功能异常问题排查

你的问题核心出在 Maphilight 和 image-map-resizer 的坐标处理逻辑冲突上：

• image-map-resizer 是直接修改 <map> 里 <poly> 的坐标值，让它适配缩放后的图片尺寸；
• 而 Maphilight 是在图片上方生成一个隐藏的 <canvas>，基于初始的区域坐标绘制高亮效果，并且会缓存这些坐标数据。

当你缩放图片后，先调用 imageMapResize() 修正了map的坐标，但紧接着又调用 $('img[usemap]').maphilight() 时，Maphilight 并没有清除之前生成的旧canvas层和缓存的初始坐标，而是直接基于旧数据叠加新的高亮层——这就导致新的高亮区域还是对应图片缩放前的坐标，和修正后的map区域完全错位。

Maphilight 提供了 destroy 方法，可以彻底清除它生成的canvas层和缓存数据。你只需要在每次缩放后，先调用销毁方法，再重新初始化高亮即可。

修改后的代码如下：

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

function ZoomIn () {
  $("img").animate({ height: '+=200', width: '+=200' }, 1000, function() {
    imageMapResize();
    // 先销毁旧的高亮实例和缓存
    $('img[usemap]').maphilight('destroy');
    // 重新初始化高亮
    $('img[usemap]').maphilight();
  });
}

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

考虑到你有300-400个poly区域，频繁销毁重建可能会有轻微性能波动，你可以：

• 初始化 Maphilight 时添加 fade: false 参数，关闭淡入淡出动画，提升渲染速度；
• 如果不需要实时高亮所有区域，可设置 alwaysOn: false，只在鼠标 hover 时生成高亮。

示例初始化配置：

$('img[usemap]').maphilight({
  fade: false,
  alwaysOn: false
});

内容的提问来源于stack exchange，提问作者KuKeC