使用客户端脚本的交互式地图

时间:2011-07-25 20:28:07

标签: javascript jquery html css web-applications

我正在寻找一个简单的Web应用程序项目,其目标是在用户输入指定数字时在图像/地图上标记特定点。

例如:假设文档上有美国地图,下面是文本字段表单。当用户键入(5)时,加利福尼亚州将处于高位。

我见过类似的技术用鼠标悬停完成。但我在JS,JQ,CSS,HTML方面的技能是最大的“再现”。我刚才描述的情景可能吗?非常感谢任何指导/提示/提示。

谢谢

1 个答案:

答案 0 :(得分:0)

假设您的地图是使用Javascript和HTML创建的,这很容易。您需要验证文本表单,以便每个区域与您希望用户键入的内容相关联。因此,对于您的示例,如果用户键入(5),您可能希望将其链接到地图上的加利福尼亚地区的ID(即“加利福尼亚”)。

所以用这些期望制作哈希:

linkedArray = new Array(); linkedArray['5'] = "california";

等。等

然后根据该数组检查文本框值,并使用一个CSS类来更改地图中所需元素的背景颜色,而不仅仅是将该类添加到元素中(如果它在框中输入)。

for var i in linkedArray{ if linkedArray[i] == $("yourTextbox").val() { $('"' + linkedArray[i] + '"').addClass("highlighted"); } }

如果你只是一个直接的Jpeg地图,这会变得更加复杂。