2011-03-24 49 views
1

你好 我试图实现基于谷歌地图导航一样的界面建筑物内的房间一个HTML5。我正在考虑在建筑布局的静态2D图像中使用包含有关房间位置(如像素坐标)信息的SQL数据库。关于实现类似地图的导航界面的建议?

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

将帆布或SVG是一个合适的解决方案?如何只使用CSS3?由于我需要在iPad上的浏览器中执行此操作,因此不允许使用Flash。

回答

0

如果你正在寻找的东西谷歌地图状,检查出polymaps提供所有您阅读/叉的JavaScript代码。

上的图像的顶部仅画线可与帆布或SVG来完成。一个纯CSS的解决方案听起来像对我来说更多的工作。

1

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

只是在想即兴,但有可能给每个房间作为一个单独的图像分别放置在画布上 - 本质合成房间共同打造的建筑图。如果应该放置图像,并且每个房间的图像文件路径可以作为房间属性存储在数据库中,则可以为路上的意外事故增加一些灵活性。然后,您可以很容易地在合成图像上绘制具有上下文moveto和lineTo的路线。