使用 HTML 图像映射实现 javascript Web 界面的提示和技巧
我想获得一些使用 JavaScript 实现 Web 界面的提示和技巧，该界面允许用户单击地图上的某些预定义区域，并在单击提交按钮时返回所单击区域的列表。然后该列表将发送到服务器（为此我可以使用 HTTP“post”方法）。
第一个问题是：如何在地图上定义区域。 我对 HTML 图像映射很感兴趣，但这似乎很麻烦，因为我必须提取每个区域的坐标。我想知道它们是否是一种从图像自动生成此列表的方法？
第二个问题是：如何存储单击区域的列表，以便当用户单击提交按钮时我可以将其发送到服务器。我对 JavaScript 不太熟悉，所以对于有经验的 JavaScript 程序员来说这可能是一个简单的问题;-)
谢谢
I'd like to get some tips and tricks to implement a web-interface with JavaScript that would allow users to click on some predefined regions on a map and returns a list of the clicked regions when clicking on a submit button. This list will be then send to a server (for that I can use the HTTP "post" method).
The first question is : how to define the regions on a map.
I red about HTML image maps but it seems to be cumbersome as I'll have to extract the coordinates of each region. I was wondering if they would be a way to automatically generate this list from an image ?The second question is : how to store the list of clicked regions so that I can send it to the server when the user clicks on the submit button. I'm not too familiar with JavaScript so it will probably be an easy one for experienced JavaScript programmers ;-)
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
表单可以更新
[区域 onclick="document.forms[0].clicked.value+=',region3'" ... />
[区域onclick="document.forms[0].clicked.value+=',region4'" ... />
[form onsubmit="var val = this.clicked.value; if (val) this.clicked.value=val.substring(1)">
[input type="hidden" name="clicked" value="" />
其中脚本删除了前导逗号
请将 [ 更改为 < - 所以上面的代码让我很难受
A hidden field in a form can be updated with
[ area onclick="document.forms[0].clicked.value+=',region3'" ... />
[ area onclick="document.forms[0].clicked.value+=',region4'" ... />
[form onsubmit="var val = this.clicked.value; if (val) this.clicked.value=val.substring(1)">
[input type="hidden" name="clicked" value="" />
where the script removes the leading comma
Please change the [ to < - SO is giving me a hard time with the above code
这取决于您从哪里获取地图。有公共API吗？一般来说，我想说它们必须手动添加。为了帮助您创建一个界面，可以更轻松地完成此操作，即您在特定区域周围拖动一个小框，然后您可以输入其详细信息，例如县、区号等。
将区域存储为 2-多维数组。
map[x][y].town = 'uxbridge'然后将事件侦听器委托给图像。找出鼠标单击的 x,y 坐标，循环遍历地图数组以查看是否匹配。用户必须单击 1px 点才能在数组中找到它，因此为了避免这种情况，只需使用 50px 的“间距”值，因此 x,y 可以是 50px。然后突出显示该区域并将其添加到区域数组中。可能有更好的方法来使用和更好的算法来搜索map[]数组，但最终您必须转换中的每个元素将map[]数组映射到，无论如何这都会很麻烦实际上废弃它，
会更容易并且适合这个。这里最大的问题是如何将区域存储到map[]数组中，这又是第 1 点以及您可以使用的 API 的全部内容，或者通过界面手动添加它们。然后循环遍历该数组并将其输出到每个数组，并将其 x、y、w、h 坐标输出到一个区域，并在完成后推送到 DOM。然后向每个 OR 添加一个事件侦听器，如果您想提高效率，请在上委托一个事件侦听器来处理点击事件。然后，您只需从该区域元素的 map[] 数组中提取数据即可。It depends on where you're getting your maps from. Is there a public API? In general I'd say they would have to be added manually. To help you could create an interface that would do this for you easier i.e. you drag a small box around a specific area, then you can enter its details such as county, area code, etc.
Store the regions as a 2-multidimensional array.
map[x][y].town = 'uxbridge'then delegate an event listener to a image. Find out the x,y coordinates the mouse was clicked on, loop through the map array to see if it matches. The user would have to click on a 1px point for it to be found in the array, so to avoid this just use a "spacing" value of say 50px, so the x,y can be 50px out either way. Then highlight that area and add it to the region array. There probably is a better way of doing this with<map>and better algorithm to search themap[]array, but ultimately you'd have to convert every element in the map[] array to<area>which would be cumbersome anywayActually scrap that,
<map><area>would be much easier and suited for this. The biggest problem here is working out how to get the regions stored into themap[]array, again this is point 1 and all about the API that you can use, or add them manually through an interface. Then you loop through the array and output it to each with its x, y, w, h coords to anareaand push to the DOM once complete. Then add an event listener to each OR if you want to be much more efficient, delegate an event listener on<map>to handle the on click events. Then you just pull the data from the map[] array for that area element.我尝试了maphilight脚本（http://davidlynch.org/js/maphilight/），它工作得很好，但是当使用具有许多区域的地图时（我有大约 10000 个区域），它似乎会消耗大量 CPU 时间。有办法解决这个问题吗？
顺便说一下，这里有这个脚本的改进版本：
http://formidablo.nl/jquery/
I tried the maphilight script (http://davidlynch.org/js/maphilight/) and it works quite well but it seems to consume a lot of CPU time when using maps with many areas (I have around 10000 areas). Would there be a way to fix that ?
By the way, there is an improved version of this script available here :
http://formidablo.nl/jquery/