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

Question

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

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

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

谢谢

Answer 1

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

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

很容易，我们可以集成点击事件，无论java脚本代码与svg图像。 干杯！！

Answer 2

尝试FLDraw Interactive Image Creator Lite ，它是免费的，用它来创建一个适合学校的移动友好的交互式地图，我已经将它用于我的一些项目（不是Lite版本，因为我也需要一些高级功能）

这很简单：

1. 启动新项目并选择学校地图图像作为基本图像
2. 使用“形状”工具创建热点
3. 双击新的shape元素以打开事件窗口
4. 选择一种事件类型（工具提示，图片信息框，HTML信息框，...）
5. 保存项目并发布到HTML5

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

从他们的主页示例交互式地图