2014-01-12 63 views
2

我要构建和开发我的学校的交互式地图。地图应该是完全互动的,应该有可点击的事件。当用户想要查看实验室详细信息,他/她应该点击特定的实验室区域。因此,可点击的事件,弹出窗口应该应用于地图。使用HTML5,CSS3,Javascript创建交互式地图

我已经用SVG/CSS和HTML5开始了这个任务。而且我到目前为止搜索了它并且发现了这个有趣的链接。 http://jvectormap.com/examples/mall/

如果有人知道一个更好的教程或网站来完成我的任务,这将是非常grateful.If所以请大家分享一些教程/ URL链接

感谢

回答

2

因为我一直在寻找这个,我发现这个有趣的网站,你可以绘制自己的SVG图像。 http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

您可以轻松获取图表的svg代码。

很容易,我们可以集成点击事件,无论使用svg图像的Java脚本代码。干杯!!

+0

链接不工作,新的链接工具是:https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor .html – GtEx

0

尝试FLDraw Interactive Image Creator Lite,它是免费的, 使用它来创建你的学校的一个移动友好的互动式地图,我已经用它 我的一些项目(非精简版版,因为我需要一些先进的功能太)

这真的很简单:

  1. 启动一个新项目,并选择你的学校地图图像为基础映像
  2. 使用形状工具来创建一个热点
  3. 双击你的新造型元素打开事件窗口
  4. 选择一个事件类型(工具提示,图像信息框,HTML信息框,...)
  5. 保存项目,并发布到HTML5

在浏览器中打开已创建的HTML文件。

Sample Interactive Map from their homepage

+0

欢迎来到Stack Overflow!你可以阅读如何[回答]一个问题。 – Katie