1

我想获得一些技巧和窍门，以使用 JavaScript 实现 Web 界面，允许用户单击地图上的某些预定义区域，并在单击提交按钮时返回单击区域的列表。然后这个列表将被发送到服务器（为此我可以使用 HTTP“post”方法）。

  1. 第一个问题是：如何在地图上定义区域。我对 HTML 图像映射很感兴趣，但它似乎很麻烦，因为我必须提取每个区域的坐标。我想知道它们是否会是一种从图像自动生成此列表的方法？

  2. 第二个问题是：如何存储点击区域列表，以便在用户点击提交按钮时将其发送到服务器。我对 JavaScript 不太熟悉，所以对于有经验的 JavaScript 程序员来说，它可能会很容易；-)

谢谢

4

3 回答 3

0

我尝试了 maphilight 脚本（http://davidlynch.org/js/maphilight/），它工作得很好，但是在使用具有许多区域的地图时（我有大约 10000 个区域），它似乎消耗了大量的 CPU 时间。有没有办法解决这个问题？

顺便说一句，这里有这个脚本的改进版本：http: //formidablo.nl/jquery/

于 2010-08-25T07:16:29.850 回答
0
  1. 您可以使用许多图像地图创建程序之一，或者找到一个实用程序来为您完成：q=Image+Tracing+OR+trace+"Image+MAP"+OR+imagemap

  2. 表单中的隐藏字段可以更新为

    [ 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)">

    [输入类型=“隐藏”名称=“点击”值=“”/>

脚本删除前导逗号的位置

请将 [ 更改为 < - 所以上面的代码让我很难过

于 2010-08-19T08:30:28.390 回答
0

  1. 这取决于您从哪里获取地图。有公共 API 吗？一般来说，我会说它们必须手动添加。为了帮助您创建一个界面，可以更轻松地完成此操作，即您在特定区域周围拖动一个小框，然后您可以输入其详细信息，例如县、区号等。

  2. 将区域存储为二维多维数组。map[x][y].town = 'uxbridge'然后将事件侦听器委托给图像。找出鼠标点击的 x,y 坐标，循环遍历地图数组以查看是否匹配。用户必须单击 1px 点才能在数组中找到它，因此为避免这种情况，只需使用 50px 的“间距”值，因此 x,y 可以是 50px。然后突出显示该区域并将其添加到区域数组中。可能有更好的方法<map>和更好的算法来搜索map[]数组，但最终你必须将 map[] 数组中的每个元素转换为<area>无论如何都会很麻烦

实际上废弃它，<map><area>会更容易并且适合这个。这里最大的问题是如何将区域存储到map[]数组中，这也是第 1 点以及您可以使用的 API，或者通过接口手动添加它们。然后你循环遍历数组并将它的 x、y、w、h 坐标输出到每个数组，并area在完成后推送到 DOM。然后为每个 OR 添加一个事件侦听器，如果您想提高效率，请委托一个事件侦听<map>器来处理点击事件。然后，您只需从该区域元素的 map[] 数组中提取数据。

于 2010-08-19T08:42:50.530 回答