如何创建可随屏幕尺寸缩放的交互式校园摄像头地图

方案1：Leaflet.js（轻量响应式地图库，新手友好） #

Leaflet是专注于交互式地图的轻量库，天生支持响应式缩放，能轻松实现多边形/锥形交互区域，代码量不大，适合入门学习。

• 核心步骤：
  1. 将校园地图图片作为自定义底图导入Leaflet
  2. 用L.polygon()绘制每个摄像头的锥形监控区域（按地图上的坐标点定义多边形）
  3. 给每个多边形绑定弹窗，显示摄像头唯一ID，同时嵌入时段请求表单
  4. 表单提交直接用mailto:协议调用邮箱客户端，无需后端服务器
• 极简示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <style>
    #map { height: 100vh; width: 100%; margin: 0; padding: 0; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // 初始化地图，适配自定义底图尺寸
    const map = L.map('map').setView([0, 0], 1);
    const campusMap = L.imageOverlay('你的校园地图路径.jpg', [[0, 0], [1000, 800]]).addTo(map);
    map.fitBounds(campusMap.getBounds());

    // 示例：添加一个摄像头的锥形区域和弹窗表单
    L.polygon([[100, 200], [150, 150], [200, 200]])
      .addTo(map)
      .bindPopup(`
        <h4>摄像头ID: CAM-001</h4>
        <form action="mailto:你的邮箱@学校域名" method="post" enctype="text/plain">
          <label>开始时间:</label><br>
          <input type="datetime-local" name="start_time" required><br>
          <label>结束时间:</label><br>
          <input type="datetime-local" name="end_time" required><br>
          <button type="submit" style="margin-top:10px;">发送请求</button>
        </form>
      `);
  </script>
</body>
</html>

• 优势：完全适配桌面/平板/移动设备，文档齐全，社区资源多，后续扩展功能也方便。

方案2：Figma可视化制作（零/低代码） #

如果不想写代码，用Figma可以可视化完成整个交互式原型，导出后直接用或者转成网页。

• 核心步骤：
  1. 将带绿色锥形标识的校园地图导入Figma
  2. 用Figma的「热点」工具，给每个锥形区域绘制多边形热点
  3. 创建弹窗组件，包含摄像头ID和时段输入框
  4. 设置热点交互：点击热点弹出弹窗，弹窗表单可通过插件（如Formspark）绑定到你的邮箱
  5. 直接分享Figma原型链接给同事，或用「Figma to HTML」插件导出响应式网页
• 优势：纯可视化操作，无需写代码，快速上手，适合完全没编码基础的场景。

方案3：改进HTML Image Map（解决缩放问题） #

基于你已经尝试过的Image Map，用几行JavaScript解决缩放适配问题，改动最小。

• 核心思路：监听窗口缩放事件，按当前地图尺寸与原始尺寸的比例，动态更新area标签的坐标
• 示例代码：

<img id="campusMap" src="你的校园地图路径.jpg" usemap="#cameraMap" style="width:100%; height:auto;">
<map name="cameraMap">
  <!-- 存储原始坐标到data属性，方便缩放计算 -->
  <area id="cam001" shape="poly" data-original-coords="100,200,150,150,200,200" href="#" onclick="showRequestForm('CAM-001')">
</map>

<script>
  const mapImg = document.getElementById('campusMap');
  // 替换成你原始地图的实际尺寸
  const originalWidth = 1920;
  const originalHeight = 1080;

  // 动态更新坐标的函数
  function updateAreaCoords() {
    const scaleX = mapImg.offsetWidth / originalWidth;
    const scaleY = mapImg.offsetHeight / originalHeight;
    // 遍历所有摄像头区域更新坐标
    document.querySelectorAll('[data-original-coords]').forEach(area => {
      const originalCoords = area.getAttribute('data-original-coords').split(',').map(Number);
      const newCoords = originalCoords.map((val, idx) => 
        Math.round(idx % 2 === 0 ? val * scaleX : val * scaleY)
      ).join(',');
      area.setAttribute('coords', newCoords);
    });
  }

  // 初始化和窗口缩放时触发更新
  window.addEventListener('load', updateAreaCoords);
  window.addEventListener('resize', updateAreaCoords);

  // 弹出请求表单
  function showRequestForm(camId) {
    const start = prompt(`请输入录像开始时间（格式：YYYY-MM-DD HH:MM）:`);
    const end = prompt(`请输入录像结束时间（格式：YYYY-MM-DD HH:MM）:`);
    if (start && end) {
      window.location.href = `mailto:你的邮箱@学校域名?subject=录像请求：${camId}&body=摄像头ID：${camId}%0A开始时间：${start}%0A结束时间：${end}`;
    }
  }
</script>

• 优势：基于你已有的尝试，学习成本低，代码改动小，快速解决缩放问题。

内容的提问来源于stack exchange，提问作者Champ