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

Question

我将要建立和开发一个交互式的学校地图。该地图应是完全交互式的，其中应该有可点击的事件。当用户想查看实验室详细信息时，他/她应该点击特定的实验室区域。因此，该地图应用于可点击事件、弹出窗口。

我已经使用SVG/CSS和HTML5开始了这个任务。到目前为止，我已经搜索到了这个有趣的链接：http://jvectormap.com/examples/mall/ 如果有人知道更好的教程或网站来完成我的任务，那将非常感激。如果有，请分享一些教程/网址链接。

谢谢！

- Amila Iddamalgoda

Answer 1

自从我在搜索中发现了这个有趣的网站，您可以在该网站上绘制自己的SVG图像。我们可以轻松地获取图表的SVG代码。同时，我们可以轻松地将点击事件和任何JavaScript代码集成到SVG图像中，祝贺您！请查看http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html。

- Amila Iddamalgoda

---

链接无效，请使用新链接访问工具：https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html - GtEx

新链接还是不工作...现在是这个：https://github.com/SVG-Edit/svgedit - Amjo

Answer 2

试用FLDraw交互式图片创建器Lite，它是免费的，用它来创建适用于移动设备的学校互动地图，我已经在一些项目中使用过它（不是Lite版，因为我需要一些高级功能）

它真的很简单：

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

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

其主页上的示例交互式地图

- Jeff

---

欢迎来到 Stack Overflow！您可以了解如何[回答]问题。 - Katie