如何用jQuery缩放带标记点的图片并保持标记相对位置

我来帮你搞定这个问题！核心思路是放弃固定像素的定位方式，改用相对图片宽高的比例值存储标记点位置，这样不管图片怎么缩放，都能算出正确的绝对位置，保证标记点始终对准原来的相对位置。下面是完整的实现代码和详细解释：

完整代码实现 #

HTML #

<div id="pic_wrapper">
  <div id="selected_picture">
    <img src="map.png" alt="可缩放地图" />
  </div>
</div>

CSS #

#pic_wrapper{
  position: relative;
  max-width: 100%; /* 让容器自适应父元素宽度，实现图片缩放 */
}
#selected_picture img {
  width: 100%;
  height: auto;
  display: block; /* 消除图片底部默认的空白间隙 */
}
.pin {
  position: absolute;
  height: 50px;
  width: 50px;
  /* 让标记点中心对准点击位置，替代原来手动减25px的逻辑 */
  transform: translate(-50%, -50%);
}
.pin-img {
  width: 100%;
  height: auto;
}

JavaScript #

$(function(){
  // 存储所有标记点的DOM元素，方便批量更新位置
  const pins = [];

  // 处理图片点击事件，创建标记点
  $('#selected_picture').on('click', function(e){
    const $img = $(this).find('img');
    const imgWidth = $img.width();
    const imgHeight = $img.height();
    const offset = $img.offset();

    // 计算点击位置相对于图片宽高的比例（0~1之间的数值）
    const relativeX = (e.pageX - offset.left) / imgWidth;
    const relativeY = (e.pageY - offset.top) / imgHeight;

    // 创建标记点元素
    const $pin = $('<div class="pin"><img class="pin-img" src="pin.png" alt="标记点" /></div>');
    // 把相对位置存储在标记点的data属性中
    $pin.data('relativePosition', { x: relativeX, y: relativeY });
    $('#pic_wrapper').append($pin);
    pins.push($pin);

    // 初始化标记点的位置
    updatePinPosition($pin);
  });

  // 更新单个标记点的绝对位置
  function updatePinPosition($pin){
    const $img = $('#selected_picture img');
    const currentImgWidth = $img.width();
    const currentImgHeight = $img.height();
    const relPos = $pin.data('relativePosition');

    // 根据当前图片尺寸和相对比例，计算绝对位置
    const absoluteX = relPos.x * currentImgWidth;
    const absoluteY = relPos.y * currentImgHeight;

    $pin.css({
      left: `${absoluteX}px`,
      top: `${absoluteY}px`
    });
  }

  // 监听窗口大小变化，批量更新所有标记点位置
  $(window).on('resize', function(){
    pins.forEach(pin => updatePinPosition(pin));
  });

  // 处理图片异步加载的情况：图片加载完成后再初始化标记点位置
  $('#selected_picture img').on('load', function(){
    pins.forEach(pin => updatePinPosition(pin));
  });
});

关键细节解释 #

1. 相对比例存储位置
   原来的代码直接计算固定像素的left/top，当图片缩放时，这些值就不再对应原来的相对位置。改用相对比例后，不管图片宽高怎么变，都能通过当前图片宽 * 比例值算出正确的绝对位置。

2. transform对齐标记点
   使用transform: translate(-50%, -50%)让标记点的中心精确对准点击位置，比手动减去25px（标记点半宽）的方式更可靠，也更容易维护。

3. resize监听与批量更新
   当窗口大小变化时，图片会自动缩放，此时遍历所有标记点，调用updatePinPosition重新计算位置，保证标记点始终跟随图片同步缩放。

4. 图片加载事件处理
   如果图片是远程加载的，初始的宽高可能不准确，添加load事件监听，确保图片加载完成后再初始化标记点位置。

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