Блог

Я пытаюсь переместить HTML-изображение (черный маркер) туда, где я нажимаю на карту на экране. На карте есть функция onclick, которая делает маркер видимым и перемещает его туда, куда нажимает пользователь. Однако на данный момент это работает только для размера экрана, который я использую, и всякий раз, когда размер окна изменяется, изображение на каждой оси смещается на несколько сотен пикселей.

В данный момент я сохраняю координаты щелчка в массиве и использую стиль DOM.слева/сверху, чтобы изменить положение, и использую эти координаты плюс заданное количество пикселей, которое работает для меня, но не для любого другого экрана. Я хотел бы, чтобы он перемещался туда, куда нажимает пользователь, независимо от размеров страницы.

Это текущий способ, которым я занимаюсь, когда координаты являются массивом, содержащим относительные координаты:

 document.getElementById('black-marker').style.visibility = 'visible';
document.getElementById('black-marker').style.left = coords[0]-20;
document.getElementById('black-marker').style.top = coords[1] 205;
 

Щелкните в красном поле, и черный круг переместится в точку мыши.

Я получил положение красного ящика и положение мыши и использовал их для вычисления относительного положения черного ящика.

 const blackMarker = document.getElementById('black-marker');
const parent = blackMarker.parentElement;

parent.addEventListener('click', e => {
  const {
    x,
    y,
    width,
    height
  } = parent.getBoundingClientRect();
  blackMarker.style.left = `${(e.clientX - x) / width * 100}%`;
  blackMarker.style.top = `${(e.clientY - y) / height * 100}%`;
}); 

 body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: red;
}

span {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 25px;
  border-radius: 50%;
  height: 25px;
  background-color: black;
} 

 <div>
  <span id="black-marker"></span>
</div>