So here's the problem: I want to create a webpage based interactive map/image. A user can click anywhere in the image to create a red house or a green house at that point. Then they can fill in a form with attributes to that newly created house object like Name, size etc
所以这就是问题所在:我想创建一个基于网页的交互式地图/图像。用户可以单击图像中的任何位置以在该点创建红房子或温室。然后他们可以填写一个带有属性的表单到新创建的house对象,如Name,size等
When the user has chosen his/her type of house from a radio button selection, they click inside the map and the a small house image loads on the point they clicked on. (A new house object has been created).
当用户从单选按钮选择中选择他/她的房屋类型时,他们在地图内部点击并且在他们点击的点上加载小房子图像。 (已创建新的房屋对象)。
The newly created objects' properites (like name, position) should be maintained (saved in a mysql database, server side) so that the next time the map loads up (either on refresh, browser restart, deletion of cookies), the house objects load in the right place on the map.
应该维护新创建的对象的特性(如名称,位置)(保存在mysql数据库,服务器端),以便下次加载地图时(刷新,浏览器重启,删除cookie),房屋对象加载到地图上的正确位置。
I also would like the user to be able to make changes or delete the house objects. Responsiveness of the interactive map/image would be an added benefit.
我也希望用户能够进行更改或删除house对象。交互式地图/图像的响应性将是额外的好处。
My problem is I don't know how to go about this (fit the pieces together, you can say). I have basic knowledge of HTML, CSS, PHP, Javascript, DOM, jquery, mySQL. So how can I create such an interactive image or map? Any guidance or solution that can point me in the right direction is appreciated.
我的问题是我不知道该如何解决这个问题(你可以说,把它们放在一起)。我有HTML,CSS,PHP,Javascript,DOM,jquery,mySQL的基本知识。那么我该如何创建这样的交互式图像或地图呢?任何可以指向正确方向的指导或解决方案都表示赞赏。
2 个解决方案
#1
2
Backend
At first you need to define a database with a table for your houses with the properties you want to store. To store the houses position you need a x- and y-coorinate for every house. I would recommend doing it in percent or in another relative coordinate format, so that if you change the image size in the browser the houses are still correctly positioned without having to recalculate the position from absolute pixel values.
首先,您需要为您的房屋定义一个数据库,其中包含您要存储的属性。要存放房屋位置,您需要为每个房屋提供x和y坐标。我建议以百分比或其他相对坐标格式进行,这样如果您在浏览器中更改图像大小,房屋仍然可以正确定位,而无需从绝对像素值重新计算位置。
Then you need a script to access the database and to fetch, create, edit and delete houses, you mentioned you have knowledge of PHP, so you could write a very simple one-file API: houses.php In this file you establish a database connection to your previously created database and define all the functions you need (e.g. fetch, create, edit and delete). Which function you want to execute in each call to the API could be told over a URL-Parameter. E.g. houses.php?action=fetch could return you a JSON-list with all the houses stored in the database. So in the houses.php you would call a function based on the action-parameter in the URL. In a function you would echo the output as JSON string (PHP already has functions for that).
然后你需要一个脚本来访问数据库并获取,创建,编辑和删除房屋,你提到你有PHP的知识,所以你可以编写一个非常简单的单文件API:houses.php在这个文件中你建立一个数据库连接到先前创建的数据库并定义所需的所有功能(例如,获取,创建,编辑和删除)。您可以通过URL-Parameter告知每次调用API时要执行的功能。例如。 houses.php?action = fetch可以返回一个JSON列表,其中包含存储在数据库中的所有房屋。所以在houses.php中你可以根据URL中的action-parameter调用一个函数。在函数中,您将输出作为JSON字符串回显(PHP已经具有该函数)。
Frontend
Ok, now your backend is set up. But you still need the frontend: You have a simple HTML-file where you include all your javascript and CSS files. For a good CSS-layout I recommend Bootstrap Then you have the image on the left and the controls on the right. Now you need to load the houses that are already in your database. So after the document is ready, there is a jQuery-Event for that, you make an AJAX-call (jQuery is also good for that) to your API with houses.php?action=fetch which will return you the houses as an JSON-Object which can easily be used in javascript. Store that object in a variable so that you can access the information for all the houses.
好的,现在你的后端已经设置好了。但是你仍然需要前端:你有一个简单的HTML文件,你可以在其中包含所有的javascript和CSS文件。对于一个好的CSS布局我推荐Bootstrap然后你有左边的图像和右边的控件。现在您需要加载数据库中已有的房屋。所以在文档准备就绪之后,有一个jQuery-Event,你用你的API做一个AJAX调用(jQuery对你来说也很好)和houses.php?action = fetch这将把你的房子作为JSON返回给你 - 可以在javascript中轻松使用的对象。将该对象存储在变量中,以便您可以访问所有房屋的信息。
Then you need a function to draw all the houses you have stored on the map, based on their properties (position and color).
然后,您需要一个函数来根据它们的属性(位置和颜色)绘制存储在地图上的所有房屋。
And you need a click event on the map, when the user starts to create a house that you can create a new house on the map and initialize the controls on the right. In the CSS you need to set the house-image position to relative and the houses position to absolute, so that the houses can be displayed as overlay above the image. And remember storing the houses position in a relative format like percent to the underlaying image.
当用户开始创建一个可以在地图上创建新房子并在右侧初始化控件的房子时,您需要在地图上进行点击事件。在CSS中,您需要将房屋图像位置设置为相对位置,将房屋位置设置为绝对位置,以便房屋可以显示为图像上方的叠加。并记住以相对于底层图像的百分比存储房屋位置。
Then you need events for all the created houses. So that if the user selects a house it can be identified via a HTML data-attribute e.g. data-id="house ID". This id can then be used to get the house from your stored list of all houses to display the name etc. in the controls on the right.
然后,您需要为所有创建的房屋提供活动。因此,如果用户选择房屋,则可以通过例如HTML数据属性来识别房屋。 data-id =“house ID”。然后可以使用此ID从您存储的所有房屋列表中获取房屋,以在右侧的控件中显示名称等。
Another important event would be the click on the button to save or delete the currently selected house. In this event you can call a function to check for validation of the input and make the AJAX call to your API. To store or to delete objects you should set the method to 'PUT' or 'DELETE' in the AJAX call.
另一个重要事件是点击按钮保存或删除当前选定的房屋。在这种情况下,您可以调用函数来检查输入的验证并对您的API进行AJAX调用。要存储或删除对象,您应该在AJAX调用中将方法设置为“PUT”或“DELETE”。
To start developing all this I can recommend XAMPP as a local development environment. I hope this answer fits the pieces a little together and gives an overview of the things you need to build.
要开始开发所有这些,我可以推荐XAMPP作为本地开发环境。我希望这个答案能够很好地融合在一起,并概述了你需要构建的东西。
#2
0
Its been a while but I figured I should provide an update on how I accomplished this.
它已经有一段时间,但我想我应该提供一个关于我如何完成这个的更新。
If you want to make an interactive map of any sort, use Leaflet (http://leafletjs.com/). It's nothing short of amazing and has lots of functionality and plugins.
如果要制作任何类型的交互式地图,请使用Leaflet(http://leafletjs.com/)。它简直令人惊叹,并且具有许多功能和插件。
To create the kind of map I described:
要创建我描述的那种地图:
- Use leaflet
- In leaflet js, set/create a non-geographical map
- To create the house icons, use leaflets custom markers api to either use a static image as an icon or use CSS to render one.
- Since Leaflet is JS, you can set up Event listeners in the code that can react to the user clicking on different items on the map.
- You can use JQuery and Ajax to store information about the nodes/markers in a server-side database and in turn get info about the nodes/markers from a server-side db.
- Marker postions can be saved as latitudes and longtitudes in an array that is sent to the server (and retrieved too).
- Use refresh and timeouts to keep updating info about the map nodes or data
在传单js中,设置/创建非地理地图
要创建房屋图标,请使用传单自定义标记api将静态图像用作图标或使用CSS渲染图标。
由于Leaflet是JS,您可以在代码中设置事件侦听器,以响应用户单击地图上的不同项目。
您可以使用JQuery和Ajax在服务器端数据库中存储有关节点/标记的信息,然后从服务器端db获取有关节点/标记的信息。
标记位置可以保存为发送到服务器(也可以检索)的数组中的纬度和经度。
使用刷新和超时来不断更新有关地图节点或数据的信息
使用传单在传单js中,设置/创建非地理地图要创建房屋图标,请使用传单自定义标记api将静态图像用作图标或使用CSS渲染图标。由于Leaflet是JS,您可以在代码中设置事件侦听器,以响应用户单击地图上的不同项目。您可以使用JQuery和Ajax在服务器端数据库中存储有关节点/标记的信息,然后从服务器端db获取有关节点/标记的信息。标记位置可以保存为发送到服务器(也可以检索)的数组中的纬度和经度。使用刷新和超时来不断更新有关地图节点或数据的信息
#1
2
Backend
At first you need to define a database with a table for your houses with the properties you want to store. To store the houses position you need a x- and y-coorinate for every house. I would recommend doing it in percent or in another relative coordinate format, so that if you change the image size in the browser the houses are still correctly positioned without having to recalculate the position from absolute pixel values.
首先,您需要为您的房屋定义一个数据库,其中包含您要存储的属性。要存放房屋位置,您需要为每个房屋提供x和y坐标。我建议以百分比或其他相对坐标格式进行,这样如果您在浏览器中更改图像大小,房屋仍然可以正确定位,而无需从绝对像素值重新计算位置。
Then you need a script to access the database and to fetch, create, edit and delete houses, you mentioned you have knowledge of PHP, so you could write a very simple one-file API: houses.php In this file you establish a database connection to your previously created database and define all the functions you need (e.g. fetch, create, edit and delete). Which function you want to execute in each call to the API could be told over a URL-Parameter. E.g. houses.php?action=fetch could return you a JSON-list with all the houses stored in the database. So in the houses.php you would call a function based on the action-parameter in the URL. In a function you would echo the output as JSON string (PHP already has functions for that).
然后你需要一个脚本来访问数据库并获取,创建,编辑和删除房屋,你提到你有PHP的知识,所以你可以编写一个非常简单的单文件API:houses.php在这个文件中你建立一个数据库连接到先前创建的数据库并定义所需的所有功能(例如,获取,创建,编辑和删除)。您可以通过URL-Parameter告知每次调用API时要执行的功能。例如。 houses.php?action = fetch可以返回一个JSON列表,其中包含存储在数据库中的所有房屋。所以在houses.php中你可以根据URL中的action-parameter调用一个函数。在函数中,您将输出作为JSON字符串回显(PHP已经具有该函数)。
Frontend
Ok, now your backend is set up. But you still need the frontend: You have a simple HTML-file where you include all your javascript and CSS files. For a good CSS-layout I recommend Bootstrap Then you have the image on the left and the controls on the right. Now you need to load the houses that are already in your database. So after the document is ready, there is a jQuery-Event for that, you make an AJAX-call (jQuery is also good for that) to your API with houses.php?action=fetch which will return you the houses as an JSON-Object which can easily be used in javascript. Store that object in a variable so that you can access the information for all the houses.
好的,现在你的后端已经设置好了。但是你仍然需要前端:你有一个简单的HTML文件,你可以在其中包含所有的javascript和CSS文件。对于一个好的CSS布局我推荐Bootstrap然后你有左边的图像和右边的控件。现在您需要加载数据库中已有的房屋。所以在文档准备就绪之后,有一个jQuery-Event,你用你的API做一个AJAX调用(jQuery对你来说也很好)和houses.php?action = fetch这将把你的房子作为JSON返回给你 - 可以在javascript中轻松使用的对象。将该对象存储在变量中,以便您可以访问所有房屋的信息。
Then you need a function to draw all the houses you have stored on the map, based on their properties (position and color).
然后,您需要一个函数来根据它们的属性(位置和颜色)绘制存储在地图上的所有房屋。
And you need a click event on the map, when the user starts to create a house that you can create a new house on the map and initialize the controls on the right. In the CSS you need to set the house-image position to relative and the houses position to absolute, so that the houses can be displayed as overlay above the image. And remember storing the houses position in a relative format like percent to the underlaying image.
当用户开始创建一个可以在地图上创建新房子并在右侧初始化控件的房子时,您需要在地图上进行点击事件。在CSS中,您需要将房屋图像位置设置为相对位置,将房屋位置设置为绝对位置,以便房屋可以显示为图像上方的叠加。并记住以相对于底层图像的百分比存储房屋位置。
Then you need events for all the created houses. So that if the user selects a house it can be identified via a HTML data-attribute e.g. data-id="house ID". This id can then be used to get the house from your stored list of all houses to display the name etc. in the controls on the right.
然后,您需要为所有创建的房屋提供活动。因此,如果用户选择房屋,则可以通过例如HTML数据属性来识别房屋。 data-id =“house ID”。然后可以使用此ID从您存储的所有房屋列表中获取房屋,以在右侧的控件中显示名称等。
Another important event would be the click on the button to save or delete the currently selected house. In this event you can call a function to check for validation of the input and make the AJAX call to your API. To store or to delete objects you should set the method to 'PUT' or 'DELETE' in the AJAX call.
另一个重要事件是点击按钮保存或删除当前选定的房屋。在这种情况下,您可以调用函数来检查输入的验证并对您的API进行AJAX调用。要存储或删除对象,您应该在AJAX调用中将方法设置为“PUT”或“DELETE”。
To start developing all this I can recommend XAMPP as a local development environment. I hope this answer fits the pieces a little together and gives an overview of the things you need to build.
要开始开发所有这些,我可以推荐XAMPP作为本地开发环境。我希望这个答案能够很好地融合在一起,并概述了你需要构建的东西。
#2
0
Its been a while but I figured I should provide an update on how I accomplished this.
它已经有一段时间,但我想我应该提供一个关于我如何完成这个的更新。
If you want to make an interactive map of any sort, use Leaflet (http://leafletjs.com/). It's nothing short of amazing and has lots of functionality and plugins.
如果要制作任何类型的交互式地图,请使用Leaflet(http://leafletjs.com/)。它简直令人惊叹,并且具有许多功能和插件。
To create the kind of map I described:
要创建我描述的那种地图:
- Use leaflet
- In leaflet js, set/create a non-geographical map
- To create the house icons, use leaflets custom markers api to either use a static image as an icon or use CSS to render one.
- Since Leaflet is JS, you can set up Event listeners in the code that can react to the user clicking on different items on the map.
- You can use JQuery and Ajax to store information about the nodes/markers in a server-side database and in turn get info about the nodes/markers from a server-side db.
- Marker postions can be saved as latitudes and longtitudes in an array that is sent to the server (and retrieved too).
- Use refresh and timeouts to keep updating info about the map nodes or data
在传单js中,设置/创建非地理地图
要创建房屋图标,请使用传单自定义标记api将静态图像用作图标或使用CSS渲染图标。
由于Leaflet是JS,您可以在代码中设置事件侦听器,以响应用户单击地图上的不同项目。
您可以使用JQuery和Ajax在服务器端数据库中存储有关节点/标记的信息,然后从服务器端db获取有关节点/标记的信息。
标记位置可以保存为发送到服务器(也可以检索)的数组中的纬度和经度。
使用刷新和超时来不断更新有关地图节点或数据的信息
使用传单在传单js中,设置/创建非地理地图要创建房屋图标,请使用传单自定义标记api将静态图像用作图标或使用CSS渲染图标。由于Leaflet是JS,您可以在代码中设置事件侦听器,以响应用户单击地图上的不同项目。您可以使用JQuery和Ajax在服务器端数据库中存储有关节点/标记的信息,然后从服务器端db获取有关节点/标记的信息。标记位置可以保存为发送到服务器(也可以检索)的数组中的纬度和经度。使用刷新和超时来不断更新有关地图节点或数据的信息