基于外部光标位置在缩放平移容器内放置元素的问题

问题背景 #

在使用PanZoom实现可缩放平移的地图时，右键打开上下文菜单后点击「设置点A」，标记点无法准确定位到右键点击位置。已尝试多个坐标转换公式均无效，示例参数：光标容器内坐标x:458、y:519，缩放比例1.16，平移参数x:97、y:-97。

核心原因 #

PanZoom对map-in应用的CSS变换为translate(${x}px, ${y}px) scale(${scale})，CSS变换执行顺序为从右到左，即先缩放、后平移。容器内的光标坐标是经过缩放和平移后的结果，需反向计算得到地图内部的原始坐标。

正确坐标转换公式 #

// 容器内光标坐标 → 地图内部原始坐标
correctX = (point_left - pan_left) / pan_scale;
correctY = (point_top - pan_top) / pan_scale;

修改后的完整代码 #

HTML结构（已翻译按钮文本）

<div id="map">
  <div id="map-in">
    <img src="/assets/map.jpg" />
    <div id="pin-a">
      <img src="/assets/pin.jpg" />
    </div>
  </div>
  <div id="map-context-menu" class="map-context-menu">
      <div id="map-point-a" class="mcm">设置点A</div> 
  </div>
</div>

JavaScript代码

let elem = document.getElementById('map-in')
const panzoom = Panzoom(elem, {
  maxScale: 5,
  contain: "outside"
});

// 存储光标容器内坐标
let point_left, point_top;

$("#map-in").on("contextmenu", function(e) {
  e.preventDefault();

  const elm = $("#map");
  point_left = e.pageX - elm.offset().left;
  point_top = e.pageY - elm.offset().top;

  $("#map-context-menu").css({
      top: point_top,
      left: point_left
  }).addClass("show"); 
});

$("#map-point-a").on("click", function(e) {
  e.preventDefault();
  
  const {x: pan_left, y: pan_top} = panzoom.getPan();
  const pan_scale = panzoom.getScale();

  // 计算正确的标记点坐标
  const point_x = (point_left - pan_left) / pan_scale;
  const point_y = (point_top - pan_top) / pan_scale; 

  $("#pin-a").css({
      top: `${point_y}px`,
      left: `${point_x}px`
  }).addClass("show");
});

额外注意事项 #

• 确保#pin-a的CSS定位为position: absolute
• 确保#map-in的CSS定位为position: relative，保证标记点相对于地图容器定位

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