Question

我有一张地球地图，我希望将标记设置在用户点击的位置（例如谷歌地图上）。

<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>

和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'
        });
    });
});

对标记应用margin-left工作，我遇到Y（垂直）对齐问题。我不知道如何从margin-top计算px。

Answer 1

您可以从event.pageX和event.pageY获取用户点击的鼠标位置。这些数字将为您提供文档左上角的绝对位置。如果将标记移动到文档顶部，则只需使用这些值即可。否则你需要取下相关容器的顶部和左侧。

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

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

目前只有在欧洲内部点击时才会有效。如果您希望能够在任何地方点击，那么将事件附加到图像，您就可以摆脱地图。

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

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

1 个答案: