jquery - 在浏览器中显示大图像：允许缩放：单击时，添加标记并检索像素 x/y

Question

感觉我想做的事情应该是相当普遍的，但是我找不到任何可以做到这一点的插件。

我想在浏览器中显示一个大图像，允许用户放大它（像 zoomify 这样的 UI，或者像地图查看器），并允许用户单击图像并添加标记。标记应返回原始图像的像素 x/y 坐标。

它基本上只是用户标记图像中特定像素 x/y 值的一种方式。

如果图像是平铺的，比如 zoomify，或者它只是一个带有缩放控件的简单图像，都没有关系。我宁愿使用 jquery 而不是 flash，但这两种方式都没有关系。

任何帮助将不胜感激。

谢谢。

Answer 1

OpenLayers是为地图编写的——它可以用来平移和缩放平铺的图像。它是根据地图制作的，所以我不确定你是否可以使用它。

有用于添加标记、读取点击坐标等的扩展。

Answer 2

查看这个 jQuery 教程。您可以修改它以满足您的需要。

根据教程：这是在特定元素而不是页面中查找位置的示例：

$("#yourImageId").click(function(e){

     var x = e.pageX - this.offsetLeft;
     var y = e.pageY - this.offsetTop;

     $('#log').html(x +', '+ y);

     //Do Something to add a push pin at these coordinates.

});