如何使Imagemap多边形坐标响应式适配并供JQuery调用？

核心思路是基于图片的原始尺寸与当前显示尺寸的缩放比例，实时转换<map>中<area>的坐标，同时同步更新鼠标检测用的多边形坐标，确保两者始终匹配。

步骤1：存储基准数据 #

先把图片的原始尺寸和<map>里所有多边形的原始坐标存起来，作为缩放的基准：

// 替换成你图片的实际原始宽高
const originalImgSize = { width: 1200, height: 800 };
// 提取所有polygon类型area的原始坐标并存储
const originalAreaCoords = $('map area[shape="polygon"]').map(function() {
  return [$(this).attr('coords').split(',').map(Number)];
}).get();

步骤2：编写坐标缩放函数 #

根据当前图片的显示尺寸，计算缩放比例，将原始坐标转换为适配当前尺寸的坐标：

function scalePolygonCoords(originalCoords, currentImgSize) {
  const scaleX = currentImgSize.width / originalImgSize.width;
  const scaleY = currentImgSize.height / originalImgSize.height;
  
  // 遍历坐标数组，x坐标乘X缩放比，y坐标乘Y缩放比
  return originalCoords.map((val, idx) => {
    return idx % 2 === 0 ? val * scaleX : val * scaleY;
  });
}

步骤3：实时更新坐标 #

在页面加载和窗口尺寸变化时，同步更新<map>的坐标和鼠标检测用的多边形坐标：

function updateResponsiveMap() {
  const $targetImg = $('img[usemap]');
  const currentImgSize = {
    width: $targetImg.width(),
    height: $targetImg.height()
  };

  // 更新<map>中所有area的坐标
  $('map area[shape="polygon"]').each(function(idx) {
    const scaledCoords = scalePolygonCoords(originalAreaCoords[idx], currentImgSize);
    $(this).attr('coords', scaledCoords.join(','));
  });

  // 更新鼠标检测用的多边形坐标（替换成你自己的检测多边形变量）
  // 假设你之前用polygons数组存储检测坐标，这里直接替换
  polygons = originalAreaCoords.map(coords => scalePolygonCoords(coords, currentImgSize));
}

// 页面初始化时执行一次
$(document).ready(updateResponsiveMap);

// 窗口缩放时防抖执行，避免频繁触发
let resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(updateResponsiveMap, 100);
});

注意事项 #

• 必须使用图片的原始尺寸作为基准，不能用CSS设置的显示尺寸，否则缩放比例会计算错误。
• 防抖函数可以根据需求调整延迟时间（比如100ms），平衡响应速度和性能。
• 鼠标悬停检测的逻辑里，直接使用更新后的polygons数组即可，无需再用固定坐标。

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