你好 我正在尝试为建筑物内的房间实现一个基于 HTML5 的谷歌地图，如导航界面。我正在考虑在建筑布局的静态 2D 图像中创建一个 SQL 数据库，其中包含有关房间位置（例如像素坐标）的信息。
呈现导航线和响应点击/触摸事件的最佳方式是什么。我希望用户在 2D 地图上触摸一个房间，并在 3D 地图图像上绘制一条彩色导航路线，以向用户展示如何到达那里。
CANVAS 或 SVG 是合适的解决方案吗？只使用 CSS3 怎么样？不允许使用 Flash，因为我需要在 iPad 上的浏览器中进行这项工作。
乔
【问题讨论】：
标签： jquery css html canvas svg
SVG 创建可通过 DOM 访问的节点，而 canvas 则不会。因为 canvas 不创建 DOM 节点，所以在大多数浏览器中它的渲染速度往往比 SVG 快。如果您基于用户操作从数据库中提取信息，则使用 SVG 管理事件和操作地图可能会更容易。也就是说，您还可以通过简单地跟踪鼠标相对于画布的位置来处理画布中的用户事件。这意味着将房间等的坐标映射到画布上的 (x,y) 坐标，如果您的要求因任何原因发生变化，这可能会很痛苦。
只是想一想，但可以将每个房间作为单独的图像单独放置在画布上 - 本质上是将房间组合在一起以构建建筑地图。应该放置图像的位置以及每个房间的图像文件的路径可以作为房间属性存储在数据库中，从而为未来不可预见的突发事件增加一些灵活性。然后，您可以很容易地在合成图像的顶部绘制带有上下文 moveto 和 lineTo 的路线。
【讨论】：
如果您正在寻找类似 Google 地图的内容，请查看polymaps，它提供了所有 JavaScript 代码供您阅读/分叉。
可以使用画布或 svg 在图像顶部绘制线条。对我来说，纯 CSS 的解决方案听起来需要更多的工作。
【讨论】：