JQuery在页面加载时将矩形放置在地图上
JQuery在页面加载时将矩形放置在地图上
提问于 2016-07-21 20:25:43
我目前有一个地图，当点击图片时，它可以在上面放置一个矩形，它看起来像这样：
<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.6X坐标和0.84Y坐标，这些值已经存储，我只需要在该位置上有一个点)
图片在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，所以我想知道如何在图像上的特定位置放置一个矩形？欢迎所有的帮助！
Stack Overflow用户
回答已采纳
发布于 2016-07-21 20:39:57
如果您创建了一个接受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'
})
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38504251
复制相关文章
相似问题
腾讯云开发者
