7
任何人都知道我可以在JavaScript中添加一个标记到图像(而不是地图)?将标记添加到JavaScript中的图像?
理想情况下,我想要一个处理程序,其行为非常像向地图中添加标记 - 即onclick导致标记显示在点击的位置,并返回点的x/y像素坐标点击。
这可能吗?
干杯 理查德
任何人都知道我可以在JavaScript中添加一个标记到图像(而不是地图)?将标记添加到JavaScript中的图像?
理想情况下,我想要一个处理程序,其行为非常像向地图中添加标记 - 即onclick导致标记显示在点击的位置,并返回点的x/y像素坐标点击。
这可能吗?
干杯 理查德
是的,这是可能的。
尽管只用javascript就完全可行,但我会使用某种库,如JQuery。
该方法是使用您的标记具有img元素,然后将click-处理程序添加到要用作“地图”的图像中,该元素被点击到哪里。
下面是一个未经测试的例子:
<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />
<script type="text/javascript">
$('#map').click(function(e)
{
$('#marker').css('left', e.pageX).css('top', e.pageY).show();
// Position of the marker is now e.pageX, e.pageY
// ... which corresponds to where the click was.
});
</script>
编辑: 这是完全可能没有太多的JQuery,当然。 下面是一个代码示例。
<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />
<script type="text/javascript">
document.getElementById('map').onclick = function(e)
{
with(document.getElementById('marker'))
{
style.left = e.pageX;
style.top = e.pageY;
style.display = 'block';
}
// Here you forward the coordinates e.pageX, e.pageY
// ... to whatever function that needs it
};
</script>
天才。完美的作品,谢谢! – Richard 2009-10-28 10:03:01
速度并不快...... pageX和pageY给了我们相对于页面左上角的像素位置。 有没有什么方法可以获得图像中的像素位置? 如果没有,那么我想我可以找出图像角落的像素位置并减去,但它似乎有点混乱。 谢谢。 – Richard 2009-10-29 15:39:37
有许多不同的非标准属性指定了坐标,但它们似乎非常适合浏览器。为了避免这种情况,我会像你说的那样减去图像的位置。 – 2009-10-29 16:26:46