html中的长lat标识符

嗨,我正在尝试制作一个长lat标识符,这背后的逻辑是创建一个围绕圆形对象的圆,并使用该圆作为参考来获得lat和长坐标。我试着通过chatgpt进行检查,但目前看来这已经超出了它的能力范围。

这是有问题的代码块

const calculateCoordinates = (x, y) => {
    // Calculate the distance from the click point to the circle's center
    const dx = x - centerX;
    const dy = y - centerY;
    const distanceToCenter = Math.sqrt(dx * dx + dy * dy);

    if (distanceToCenter <= circleRadius) {
      // Calculate longitude and latitude with respect to the circle center (equirectangular projection)
      const lon = ((dx / circleRadius) * 180) / Math.PI;
      const lat = -((dy / circleRadius) * 180) / Math.PI;

      // Calculate longitude and latitude with respect to the circle center
      const centerLon = 0; // The longitude at the center of the circle
      const centerLat = 0; // The latitude at the center of the circle

      // Adjust longitude to be within the range of -90 to +90
      const longitude = centerLon + lon;
      const latitude = centerLat + lat;

      coordinatesDisplay.textContent = `Longitude: ${longitude.toFixed(2)}, Latitude: ${latitude.toFixed(2)}`;
      coordinatesDisplay.style.display = 'block';
      coordinatesDisplay.style.left = `${x}px`;
      coordinatesDisplay.style.top = `${y}px`;
    } else {
      coordinatesDisplay.style.display = 'none';
    }
  };

  imageUpload.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        image.src = e.target.result;
        loadImage();
      };
      reader.readAsDataURL(file);
    }
  });

  updateButton.addEventListener('click', () => {
    circleRadius = Number(radiusInput.value);
    const x = Number(xCoordinateInput.value);
    const y = Number(yCoordinateInput.value);
    centerX = (x / originalImageWidth) * circleImageCanvas.width;
    centerY = (y / originalImageHeight) * circleImageCanvas.height;
    drawCircle(centerX, centerY);
  });

  circleImageCanvas.addEventListener('click', (event) => {
    const rect = circleImageCanvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    calculateCoordinates(x, y);
  });

我怀疑数学可能也有问题

目前,边缘返回-60和+60,但我预计会返回-90和+90

编辑:如果需要,链接到下面的完整代码 https://drive.google.com/file/d/182qJR2lm3WMHzoO1jJ_BWgR0rhwenFfa/view?usp=sharing