如何使用HTML5、Javascript、DOM和CSS创建交互式图像

问题是： 我想创建一个基于网页的交互式地图/图像。用户可以单击图像中的任意位置，在该点创建红房子或绿房子。然后，他们可以用新创建的房屋对象的属性（如名称、大小等）填写表单

当用户从单选按钮选择他/她的房屋类型时，他们在地图内单击，并在单击的点上加载小房屋图像。（已创建新的房屋对象）

应维护新创建对象的属性（如名称、位置）（保存在mysql数据库中，服务器端），以便下次地图加载时（刷新、浏览器重启、删除cookie时），房屋对象加载到地图上的正确位置

我还希望用户能够进行更改或删除房屋对象。 交互式地图/图像的响应性将是一个额外的好处

---

我的问题是，我不知道该怎么做（你可以说，把这些部件组装在一起）。我有HTML、CSS、PHP、Javascript、DOM、jquery、mySQL的基本知识。那么，我如何创建这样一个交互式图像或地图呢？任何能为我指明正确方向的指导或解决方案都将不胜感激。

后端

首先，您需要为包含要存储的属性的房屋定义一个带有表的数据库。要存储房屋位置，每个房屋都需要一个x和y坐标。我建议使用百分比或其他相对坐标格式，这样，如果在浏览器中更改图像大小，房屋仍能正确定位，而无需从绝对像素值重新计算位置

然后您需要一个脚本来访问数据库，并获取、创建、编辑和删除房屋，您提到过您对PHP有一定的了解，因此您可以编写一个非常简单的单文件API:houses.PHP 在此文件中，您可以建立与先前创建的数据库的数据库连接，并定义所需的所有功能（例如，获取、创建、编辑和删除）。可以通过URL参数告诉您在每次调用API时要执行哪个函数。例如，houses.php？action=fetch可以返回一个JSON列表，其中包含存储在数据库中的所有房屋。因此，在houses.php中，可以根据URL中的action参数调用函数。在函数中，您将以JSON字符串的形式回显输出（PHP已经有了用于此的函数）

前端

好的，现在您的后端已经设置好了。但您仍然需要前端： 您有一个简单的HTML文件，其中包含所有javascript和CSS文件。对于一个好的CSS布局，我推荐 然后图像在左边，控件在右边。现在需要加载数据库中已有的房屋。因此，在文档准备好之后，会有一个jQuery事件，您可以使用houses.php？action=fetch对API进行AJAX调用（jQuery也适用于此），它会将houses作为JSON对象返回给您，可以轻松地在javascript中使用。将该对象存储在变量中，以便可以访问所有房屋的信息

然后，您需要一个函数来根据房屋的属性（位置和颜色）绘制存储在地图上的所有房屋

当用户开始创建房子时，您需要在地图上单击事件，您可以在地图上创建新房子并初始化右侧的控件。在CSS中，您需要将房屋图像位置设置为相对，房屋位置设置为绝对，以便房屋可以显示为覆盖在图像上方。记住，将房屋位置以相对格式存储，如与参考底图的百分比

然后，您需要为所有创建的房屋创建事件。因此，如果用户选择了一所房子，则可以通过HTML数据属性（如data id=“house id”）对其进行识别。然后可以使用此id从存储的所有房屋列表中获取房屋，以便在右侧的控件中显示名称等

另一个重要事件是单击按钮保存或删除当前选定的房屋。在这种情况下，您可以调用函数来检查输入的有效性，并对API进行AJAX调用。要存储或删除对象，应在AJAX调用中将方法设置为“PUT”或“delete”

---

要开始开发所有这些，我可以推荐XAMPP作为本地开发环境。我希望这个答案能把这些部分放在一起，并概述您需要构建的东西

已经有一段时间了，但我想我应该提供一个关于我是如何做到这一点的更新

如果要制作任何类型的交互式地图，请使用传单（）。它非常棒，有很多功能和插件

要创建我描述的地图类型，请执行以下操作：

使用传单

在传单js中，设置/创建非地理地图

要创建房屋图标，请使用传单自定义标记api将静态图像用作图标或使用CSS渲染图标

因为传单是JS，所以可以在代码中设置事件侦听器，以便用户单击地图上的不同项目时做出反应

您可以使用JQuery和Ajax在服务器端数据库中存储有关节点/标记的信息，进而获取有关节点/标记的信息 服务器端数据库中的节点/标记

标记位置可以保存为发送到服务器（也可以检索）的数组中的纬度和经度

使用“刷新”和“超时”可不断更新有关贴图节点或数据的信息

---

太神了今晚我要试试这个。我会回来更新。你也可以尝试和自定义标记。您可以将用户对象属性保存在浏览器localstorage中，并在以后担心后端问题。