如何实现图片点击位置精准标记？解决PC/移动端偏移问题

问题根源 #

1. event.offsetX/Y 依赖元素自身布局上下文，若父容器存在内边距或图片样式异常，会导致计算偏差。
2. 未确保图片完全加载就获取尺寸，可能拿到错误值。
3. 标记容器的定位基准未明确，导致绝对定位参考对象错误。

修改后的 HTML/C# 代码 #

<div class="image-container">
    <div class="image-wrapper" id="imageWrapper" style="position: relative;">
        <img id="mapImage" src="/assets/map.jpg" alt="Map" class="responsive-map">
        <div id="markers-container">
            @foreach (var asset in Model.AssetsList)
            {
                <div class="marker" style="left: @(asset.PosX)%; top: @(asset.PosY)%; transform: translate(-50%, -50%); position: absolute;">
                    <img src="@Model.AssetTypesList.FirstOrDefault(a => a.Id == asset.AssetTypeId)?.ImageUrl" 
                         alt="@asset.BoatName" 
                         style="width: 25%; height: auto;" />
                </div>
            }
        </div>
    </div>

    <button id="image-change-button">
        <i class="fa-solid fa-right-left"></i>
    </button>
</div>

<style>
.responsive-map {
    width: 100%;
    height: auto;
    display: block; /* 消除图片底部默认留白 */
}
</style>

• 给image-wrapper添加position: relative，明确标记的绝对定位基准。
• 用CSS类替代内联!important样式，避免样式冲突。
• 简化Linq查询逻辑，提升代码效率。

修改后的 JS 代码 #

function selectMarker(assetTypeId) {
    selectedMarkerId = assetTypeId;
    closePopup();

    const imageWrapper = document.getElementById("imageWrapper");
    const mapImage = document.getElementById("mapImage");
    imageWrapper.style.cursor = "crosshair";

    const handleClick = (event) => {
        // 获取图片实际渲染的位置与尺寸
        const rect = mapImage.getBoundingClientRect();
        // 计算点击位置相对图片左上角的偏移量
        const offsetX = event.clientX - rect.left;
        const offsetY = event.clientY - rect.top;

        // 转换为百分比位置
        const posX = (offsetX / rect.width) * 100;
        const posY = (offsetY / rect.height) * 100;

        openAddAssetPopup(posX, posY); // 将位置参数传递给弹窗

        imageWrapper.style.cursor = "default";
        mapImage.removeEventListener("click", handleClick);
    };

    // 确保图片加载完成后再绑定点击事件
    if (mapImage.complete) {
        mapImage.addEventListener("click", handleClick, { once: true });
    } else {
        mapImage.addEventListener("load", () => {
            mapImage.addEventListener("click", handleClick, { once: true });
        });
    }
}

• 使用getBoundingClientRect()获取图片实际渲染数据，适配所有设备的尺寸计算。
• 增加图片加载状态检查，避免尺寸计算错误。
• 将位置参数传递给弹窗，避免全局变量污染。
• 移除冗余的图片实例创建，直接使用已加载的图片元素。

额外优化建议 #

• 移动端测试时，可添加meta标签禁用缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
• 确保markers-container的尺寸与image-wrapper完全重合，避免标记定位范围偏差。

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