js如何获取图片的xy坐标？

Question

var currentWidth = $('#shapan_img').width();
var currentHeight = $('#shapan_img').height();
var offsetX = e.pageX - $('#shapan_img').offset().left;
var offsetY = e.pageY - $('#shapan_img').offset().top;
var x = offsetX / currentWidth;
var y = offsetY / currentHeight;

用了这样的方法获取了xy的坐标。我在原图是这个位置点击了图片。

我现在在小程序中渲染之后。小程序定了图片宽度342px,高度240px。我在下图的8号位，直接用上面x和y的值，x乘342 和 y乘240之后，在得到的值的基础上再减去了5才正常显示在我上图的位置。这个是什么原因导致的？有办法解决吗
这个红点的宽高都是10，似乎好像是减去了这个半径？

Answer 1

推荐使用html的map标签

https://www.runoob.com/try/try.php?filename=tryjsref_map_get

Answer 2

图片里的内容没办法直接获取，只能通过原始图片的大小和位置，结合缩放后的大小和位置进行计算，最后得到。

Answer 3

图片原始大小以及3#(相对图片)坐标肯定是已知的(提前设定好)

那其实要做的

1. 计算图片在网页中的绝对位置 (getBoundingClientRect())
2. 计算图片在网页中(相对原始大小)缩放比率
3. 计算3#实际相对坐标(按图片缩放比率结合3#原始相对坐标转换)
4. 3#绝对位置=图片绝对位置+3#实际相对坐标

p.s. getBoundingClientRect() 可能需要考虑滚动条场景

Answer 4

最简单的办法就是用mapbox生成mbtiles。然后加载到地图里面

Answer 5

提供个思路，仅供参考：把整个底图进行分切，把指定的楼盘，扣图出来，然后再把所有的图拼成一个大图。在楼盘图上，进行提示。这样肯定不会错位。