jQuery如何使用事件坐标对齐div？

Question

I have a map with Earth and I want to set the marker exactly where the user is clicking (like on google maps).

<div class='map_wrapper'>
<div class='marker'></div>
    <img src="images/map.jpg" alt="" usemap="#world_map" />

    <map name="map_coords" id='world_map'>
<area shape="poly" class='europe' name="Europe" coords="468,186,468,191,463,194,460,199,458,205" />

    </map>
</div>

<style type='text/css'>
.map_wrapper { position:relative; }
.marker {
   position:absolute;
   width:25px;
   height:34px;
   background:url(../images/marker.png) top center no-repeat;
   z-index:2;
}
</style>

And the javascript

$(document).ready(function(){
    $('.map_wrapper area').click(function(ev){
        var offset = $(this).offset();
        var mObj = $('.marker');

        mObj.css({
            'margin-left' : (ev.clientX - offset.left - (mObj.width()/2) ) + 'px',
            'margin-top' : (ev.clientY - offset.top) + 'px'
        });
    });
});

Applying margin-left for the marker is working, I'm having problem with the Y (vertical) alignment. I don't know how to calculate px from margin-top.

Answer 1

You can get the mouse position where the user clicks from the event.pageX and event.pageY. The figures will give you an absolute position from the top left of the document. If you move the marker to the top of the document then you can simply use those values. Otherwise you'll need to take off the top and left of the relative container.

$(document).ready(function(){
    $('.map_wrapper area').click(function(ev){
        var mObj = $('.marker');

        mObj.css({
            'left' : ev.pageX + 'px',
            'top' : ev.pageY + 'px'
        });
    });
});

At the moment this will only work if you click inside Europe. If you want to be able to click anywhere then attach the event to the image and you can get rid of the map.

http://docs.jquery.com/Tutorials:Mouse_Position