Angular中无法在图片鼠标点击精确位置放置标记的问题求助

问题分析 #

你遇到的核心问题是坐标基准不匹配、图片缩放的坐标映射偏差，加上标记锚点未对齐，导致标记和点击位置错位：

• event.clientX/clientY是鼠标相对于浏览器视口左上角的坐标，但绝对定位元素默认以最近的定位父元素（无定位父元素则以文档根节点）为基准，若父容器无定位设置，坐标基准直接错位。
• 图片设置了width:50%缩放显示，点击坐标是视口维度，未转换为图片自身的相对坐标。
• 标记默认以左上角定位，和鼠标点击的点视觉上不对齐。

修复方案 #

1. 修改HTML（给父容器设置定位，调整判断逻辑）

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="myDiv" ng-click="img($event)" style="position: relative; display: inline-block;">
  <img width="50%" height="50%" src="http://placekitten.com/g/400/300" alt="" id="targetImg">
  <img style="width:20px;position: absolute;" ng-style="obj.myStyle" ng-if="obj.myStyle.left" src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png" id="marker" />
</div>

• 给#myDiv加position: relative，让标记以该容器为定位基准。
• 用display: inline-block让容器宽度适配图片实际显示宽度。
• 把ng-if判断改为obj.myStyle.left，避免空对象判断失效的问题。

2. 修改JS（计算正确的相对坐标，调整标记锚点）

$scope.obj = {};
$scope.obj.myStyle = {};
$scope.img = function(event) {
  const targetImg = document.getElementById('targetImg');
  // 获取图片在视口中的位置和实际显示尺寸
  const rect = targetImg.getBoundingClientRect();
  
  // 计算鼠标相对于图片左上角的坐标（消除视口偏移影响）
  const imgRelativeX = event.clientX - rect.left;
  const imgRelativeY = event.clientY - rect.top;
  
  // 调整标记锚点：让箭头尖端对齐点击位置
  $scope.obj.myStyle["left"] = (imgRelativeX - 10) + 'px'; // 10px是标记宽度的一半，水平居中对齐
  $scope.obj.myStyle["top"] = (imgRelativeY - 20) + 'px'; // 20px是标记高度，让箭头尖对齐点击点Y坐标
  
  $log.info(`图片内相对坐标: X=${imgRelativeX}, Y=${imgRelativeY}`);
  $log.info($scope.obj.myStyle);
}

• 用getBoundingClientRect()获取图片的视口位置，将clientX/clientY转换为图片内部的相对坐标。
• 调整标记的left和top值，修正锚点偏移，让标记的视觉焦点（箭头尖）和点击位置完全重合。

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