【问题标题】:Interactive map using client-side scripting使用客户端脚本的交互式地图
【发布时间】:2011-07-25 20:28:07
【问题描述】:
我希望启动一个简单的网络应用程序项目,其目标是当用户输入指定数字时在图像/地图上标记特定点。
例如:假设文档上有美国地图,下面有一个文本字段表单。当用户输入 (5) 时,加利福尼亚州将被突出显示。
我见过类似的鼠标悬停技术。但我在 JS、JQ、CSS、HTML 方面的技能处于最大“休闲”水平。我刚才描述的场景可能吗?非常感谢任何指导点/提示/提示。
谢谢
【问题讨论】:
标签:
javascript
jquery
html
css
web-applications
【解决方案1】:
假设您的地图是使用 Javascript 和 HTML 创建的,这很容易。您将需要验证文本表单,以便每个区域都与您希望用户键入的内容相关联。因此,对于您的示例,如果用户输入 (5),您可能希望将其链接到地图上加利福尼亚地区的 id(即“california”)。
所以对这些期望做一个哈希:
linkedArray = new Array();
linkedArray['5'] = "california";
等等。等等
然后根据该数组检查您的文本框值,并使用一个 CSS 类来更改地图中所需元素的背景颜色,而不仅仅是将该类添加到该元素(如果它在框中键入)。
for var i in linkedArray{
if linkedArray[i] == $("yourTextbox").val() {
$('"' + linkedArray[i] + '"').addClass("highlighted");
}
}
如果您只有一个向上的 Jpeg 地图,这会变得更加复杂。