我如何创建一个随屏幕尺寸缩放的交互式地图（图像）

Question

背景信息，我是学校环境中的 IT/安全支持人员，我们有大约 100 个摄像头。我目前有一张校园地图，其中相机视图“重叠”（认为绿色圆锥形状大致显示每个相机的视图。

不幸的是，很多摄像机的位置相似，但面向不同的方向，或者我们有 2 个篮球场，但位于不同的位置，因此我的同事经常无法准确描述他们想要拍摄镜头的摄像机。

我想创建一个交互式地图，我的同事/执行团队可以单击摄像机（绿色圆锥体），它会告诉他们摄像机在闭路电视管理软件中的唯一名称/ID。

我尝试过使用 HTML 图像地图，但它不随屏幕尺寸缩放，因此无法在平板电脑、台式机或移动设备上轻松使用。 我曾考虑过尝试使用 MS power 应用程序，但我只能放入矩形按钮，而不能放入圆锥形/多边形。

如果它可以链接到一个表格，上面写着“您选择了摄像机 A，您想要多长时间的镜头？”，则可获得奖励积分。然后给我发邮件...

我尝试过非常有限的事情，并且不知道我可以从这里走向何方。任何和所有建议将不胜感激！！！

我的编码经验非常有限，但如果我能指出正确的方向，我会非常愿意学习！

Answer 1

我制作了一个抽象原型来理解您的任务。我对你的理解正确吗？请注意，地图是自适应的，当您单击其中一个点时，会显示其编号。

const allDots = document.querySelectorAll(".dot");
const text = document.querySelector(".text");

const handleClick = (e) => {
  text.textContent = e.target.className.split(" ").slice(-1);
};

allDots.forEach((dot) => {
  dot.addEventListener("click", handleClick);
});

.map {
  position: relative;
  display: block;
}

.img {
  display: block;
  width: 100%;
}

.dot {
  position: absolute;
  z-index: 9;
  background: red;
  width: 20px;
  height: 20px;
}

.dot-1 {
  top: 20%;
  left: 20%;
}

.dot-2 {
  top: 40%;
  left: 80%;
}

<div class="map">
      <img
        class="img"
        src="https://cs14.pikabu.ru/post_img/big/2023/02/11/6/1676106946166691447.png"
        alt="map"
      />
      <div class="dot dot-1"></div>
      <div class="dot dot-2"></div>
      <div class="text">empty</div>
    </div>

codesandbox 链接 链接