Question

我目前有一张地图，允许它在点击图像时在其上放置一个矩形，它看起来像这样：

<script>
$(document).ready(function(){ 
    $(document).on('click', 'img', function (ev) {
      $(".marker").remove();
      $("form#pointform").append(            
        $('<div class="marker"></div>').css({
          position: 'absolute',
          top: ev.pageY - 4 + 'px',
          left: ev.pageX - 4 + 'px',
          width: '5px',
          height: '5px',
          background: '#fff'
        })              
      );
    }); 
});
</script>

我还有一个不同的函数，用于确定地图上的坐标并返回其中的百分比（因此图像在左上角为0.0，在右下角为1）。现在我想在页面加载时在地图上显示矩形，以查看当前位置（例如0.6 X坐标和0.84 Y坐标，这些值已经存储，我只需要在该位置上有一个点）

图片在html中：

<form name="pointform" method="post" id="pointform">
    <div id="pointer_div">
        <img src="url/to/my/map.png" width="500" height="300" id="cross" style="position:relative;">
    </div>
</form>

我不太了解JQuery所以我想知道如何在该图像上的特定位置放置一个矩形？欢迎大家帮忙！

Answer 1

如果你创建一个接受x和y位置的setMarker函数，那么你可以在点击和页面加载时调用它。

$(document).ready(function(){ 
    $(document).on('click', 'img', function (ev) {
      $(".marker").remove();
      setMarker(ev.pageX,ev.pageY);
    });

    setMarker($('#cross').width()*.6,$('#cross').height()*.84);
});

function setMarker(xPos,yPos){
    $("form#pointform").append(            
        $('<div class="marker"></div>').css({
          position: 'absolute',
          top: yPos - 4 + 'px',
          left: xPos - 4 + 'px',
          width: '5px',
          height: '5px',
          background: '#fff'
        })              
    );
}

JQuery在页面加载时将矩形放在地图上

1 个答案: