建议实现类似地图的导航界面？

Question

您好 我正在尝试为建筑物内的房间实施基于HTML5的Google Map，例如导航界面。我正在考虑建立一个SQL数据库，其中包含有关建筑布局的静态2D图像中的房间位置（如像素坐标）的信息。

渲染导航线和响应点击/触摸事件的最佳方法是什么。我希望用户触摸2D地图上的房间，并在3D地图图像上绘制彩色导航路线，以向用户显示如何到达那里。

CANVAS或SVG会成为合适的解决方案吗？如何只使用CSS3？不允许使用Flash，因为我需要在iPad上的浏览器中进行此项工作。

乔

Answer 1

SVG创建可通过DOM访问的节点，而canvas则不会。因为canvas不会创建DOM节点，所以在大多数浏览器中它往往比SVG渲染得更快。如果要根据用户操作从数据库中提取信息，则可以更轻松地使用SVG管理事件和操作地图。也就是说，您还可以通过简单地跟踪相对于画布的鼠标位置来处理画布中的用户事件。这意味着将房间等的坐标映射到画布上的（x，y）坐标，如果您的要求因任何原因而改变，这可能会很痛苦。

只是想一下袖口，但也可以将每个房间作为单独的图像单独放在画布上 - 基本上将房间合成在一起构建建筑地图。应放置图像，并将每个房间的图像文件路径作为房间属性存储在数据库中，为不可预见的突发事件增加一些灵活性。然后，您可以非常轻松地在合成图像上绘制具有上下文moveto和lineTo的路径。

Answer 2

如果您正在寻找类似谷歌地图的内容，请查看polymaps，它提供了您阅读/分叉的所有JavaScript代码。

只需在图像顶部绘制线条即可使用canvas或svg。只有CSS的解决方案听起来对我来说更有用。