0

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

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

4

1 回答 1

0

您可以从 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

于 2013-05-03T10:39:07.207 回答