使用HTML5,CSS3,Javascript创建交互式地图

时间:2014-01-12 14:13:52

标签: javascript jquery css html5 maps

我将构建并开发一个我学校的交互式地图。地图应该是完全互动的,应该有可点击的事件。当用户想要查看实验室细节时,他/她应该点击特定的实验室区域。因此可点击事件,弹出窗口应该应用于地图。

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

如果有人知道更好的教程或网站来完成我的任务,那将非常感激。如果有,请分享一些教程/网址链接

由于

2 个答案:

答案 0 :(得分:4)

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

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

很容易,我们可以集成点击事件,无论java脚本代码与svg图像。欢呼声!!

答案 1 :(得分:2)

试试FLDraw Interactive Image Creator Lite,它是免费的, 用它来创建一个适合移动设备的学校互动地图,我已经用过了 对于我的一些项目(不是精简版,因为我也需要一些高级功能)

这很简单:

  1. 开始一个新项目并选择学校地图图像作为基本图像
  2. 使用“形状”工具创建热点
  3. 双击新形状元素以打开事件窗口
  4. 选择一种事件类型(工具提示,图片信息框,HTML信息框,...)
  5. 保存项目并发布到HTML5
  6. 在浏览器中打开创建的HTML文件。

    Sample Interactive Map from their homepage