点击子div时如何转换坐标至父div实现小地图功能

你当前的核心问题是没考虑两个元素的尺寸比例，直接将小元素的点击绝对坐标复用到大元素中，导致位置映射错误。实现坐标对应逻辑的关键是基于元素尺寸的比例换算，具体修正方案如下：

核心修正要点 #

• 给父容器（.parent）添加position: relative，确保红色定位圆点（.circle）在父容器内部完成绝对定位，而非相对于整个页面
• 计算点击位置在小元素（.child）中的相对比例，再用该比例乘以父容器的尺寸，得到对应映射位置
• 可选优化：减去圆点自身半径，让点击位置与圆点中心点对齐，提升定位精度

修改后的完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <div class="child">
    小地图
  </div>
</div>

CSS #

.parent {
  border: 3px solid #000;
  background: #898383;
  width: 100%;
  height: 300px;
  position: relative; /* 设置为圆点的定位基准 */
}

.child {
  background: #fff;
  position: absolute;
  right: 15px;
  bottom: 40px;
  width: 200px;
  height: 100px;
  border: 2px solid #eff431;
  cursor: pointer; /* 提示可点击 */
}

.circle {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
  position: absolute;
}

JavaScript #

$(".child").click(function(e) {
  // 获取小地图元素的尺寸与偏移信息
  const $child = $(this);
  const childOffset = $child.offset();
  const childWidth = $child.width();
  const childHeight = $child.height();

  // 计算点击位置相对于小地图左上角的坐标
  const clickXInChild = e.pageX - childOffset.left;
  const clickYInChild = e.pageY - childOffset.top;

  // 计算点击位置占小地图宽高的比例
  const ratioX = clickXInChild / childWidth;
  const ratioY = clickYInChild / childHeight;

  // 获取大容器的尺寸信息
  const $parent = $(".parent");
  const parentWidth = $parent.width();
  const parentHeight = $parent.height();

  // 换算到大容器中的目标坐标，减去圆点半径实现中心点对齐
  const targetX = ratioX * parentWidth - 5;
  const targetY = ratioY * parentHeight - 5;

  // 创建并添加定位圆点
  const circle = $("<div />", { class: 'circle' });
  circle.css({ left: targetX, top: targetY });
  $parent.append(circle);
});

效果说明 #

点击小地图（.child）的任意位置，红色圆点会自动映射到父容器（.parent）的对应比例位置，比如点击小地图右上角，圆点会同步出现在父容器右上角，完全匹配小地图的坐标对应逻辑。

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