Javascript 如何使用vh html、css和js重新计算div内标记的位置

我试图为一些游戏创建一个地图框架，但我对标记的recalc位置有问题。查看url进行测试，使用滚轮可以使用图像调整div的大小，但红色圆点不会返回到自己的位置。对不起，我是新来的，我想了解更多关于js和css的知识。谢谢

$（'.map live'）.css（'width'，'928px'）；
$（'.map live'）.css（'height'，'928px'）；
$（'.map live'）.css（'background-size'，'100%”）；
$（'.map live'）.bind（'mousewheel-DOMMouseScroll'，函数（事件）{
var divSize=$（'.map live'）.css（'width'）；
console.log（divSize）；
divSize=divSize.replace（'px'，''）
divSize=parseInt（divSize）；
console.log（“oldSize:+divSize”）；
var delta_px=event.originalEvent.wheeldta>0？（divSize+（divSize*0.15））：（divSize-（divSize*0.15））；
日志（“新闻大小：+delta_px”）；
$（this.css（'width'，delta_px+“px”）；
$（this.css（'height'，delta_px+“px”）；
$（this.css（'background-size'，“100%”）；
UpdatePoints（）；
});
$（函数（）{
$（“#地图直播”）.draggable（）；
});
document.getElementById（'map-live'）。addEventListener（'click'，printPosition）
函数getPosition（e）{
var rect=e.target.getBoundingClientRect（）；
var x=e.clientX-rect.left；
var y=e.clientY-rect.top；
返回{
x,，
Y
}
}
功能打印位置（e）{
var位置=getPosition（e）；
console.log（'X:'+position.X+'Y:'+position.Y）；
var divX=parseInt（$（'.map live'）.css（'width'）.replace（'px'，''）；
var divY=parseInt（$（'.map live'）.css（'height'）.replace（'px'，''）；
var vhX=（位置x/divX）*100；
变量vhY=（位置y/divY）*100；
控制台日志（'vhX:'+vhX+'vhY:'+vhY）；
}
函数UpdatePoints（）{
$（'.point'）.css（'top'，'2.477565353101834vh'）；
$（'.point'）.css（'left'，'2.477565353101834vh'）；
$（'.point'）.css（'position'，'absolute'）；
}

正文{
保证金：0；
溢出：隐藏；
}
.地图直播{
位置：绝对位置；
左：10px；
z指数：9；
背景图片：url(https://i.ibb.co/d2y5G1y/map.jpg);
宽度：222px；
高度：222px；
过渡：所有0.2s线性；
}
.点{
位置：绝对位置；
左：2.477565353101834vh；
顶部：2.477565353101834vh；
宽度：10px；
高度：10px；
背景色：红色；
边界半径：50%；
}

有人可以纠正我，但我相信您使用的
位置：绝对
是使
保持原位的原因。
您的更新点在div中总是设置相同的位置。使用“vh”计算，绝对位置与视口成比例，而不是与父容器成比例

因此，您正在缩放背景图像，但位置（x，y）将始终是（x，y），位置不会被缩放。你需要重新计算哪个是新职位

function UpdatePoints(){
  var divW = parseInt($('.map-live').css('width').replace('px',''));
  var divH = parseInt($('.map-live').css('height').replace('px',''));
  var topPosition = (2.477565353101834 / 928) * divH;
  var leftPosition = (2.477565353101834 / 928) * divW;
  $('.point').css('top', topPosition+'vh');
  $('.point').css('left', leftPosition+'vh');
  $('.point').css('position', 'absolute');
}

所以你需要计算新的位置

function UpdatePoints(){
  var divW = parseInt($('.map-live').css('width').replace('px',''));
  var divH = parseInt($('.map-live').css('height').replace('px',''));
  var topPosition = (2.477565353101834 / 928) * divH;
  var leftPosition = (2.477565353101834 / 928) * divW;
  $('.point').css('top', topPosition+'vh');
  $('.point').css('left', leftPosition+'vh');
  $('.point').css('position', 'absolute');
}

此外，我建议使用“vh”代替计算px位置。我已将已计算的
delta_px
参数添加到
UpdatePoints
函数中：

<style>
.point {
    position: absolute;
    left: 22.99180647678502px;
    top: 22.99180647678502px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
}
</style>

<script>
function UpdatePoints(delta_px){
  var position = (delta_px/100)*2.477565353101834;
  $('.point').css('top', position+'px');
  $('.point').css('left', position+'px');
  $('.point').css('position', 'absolute');
}
</script>


.点{
位置：绝对位置；
左：22.99180647678502像素；
顶部：22.99180647678502px；
宽度：10px；
高度：10px；
背景色：红色；
边界半径：50%；
}
函数更新点（delta_px）{
变量位置=（δpx/100）*2.477565353101834；
$（'.point'）.css（'top'，position+'px'）；
$（'.point'）.css（'left'，position+'px'）；
$（'.point'）.css（'position'，'absolute'）；
}

此外，这里我们计算的是
.point
元素的左上角位置，而不是中心位置。因为它是一个圆，所以工作正常，但是如果使用任何其他形状，则位置平移应该从其中心计算

我建议做一些关于如何翻译元素的研究。你可以从这里开始：


!
!
!
我试过使用relative和sticky，但也不起作用：(