关于实现类似地图的导航界面的建议？
你好 我正在尝试为建筑物内的房间实现一个基于 HTML5 的 Google 地图（类似导航界面）。我正在考虑建立一个 SQL 数据库，其中包含有关建筑布局的静态 2D 图像中的房间位置（例如像素坐标）的信息。
渲染导航线和响应单击/触摸事件的最佳方式是什么。我希望用户触摸 2D 地图上的房间，并在 3D 地图图像上绘制彩色导航路线，以向用户展示如何到达那里。
CANVAS 或 SVG 是合适的解决方案吗？只使用 CSS3 怎么样？不允许使用 Flash，因为我需要在 iPad 上的浏览器中进行这项工作。
乔
Hello
I'm trying to implement a HTML5 based Google Map like navigation interface for rooms within a building. I am thinking of having a SQL database containing information about room locations (such as pixel coordinates) within a static 2D image of the building layout.
What is the best way to render navigation lines and respond to click/touch events. I want the user to touch a room on the 2D map and have a colored navigation route drawn over the 3D map image to show the user how to get there.
Would CANVAS or SVG be an appropriate solution? How about using only CSS3? Flash is not allowed as I need to this work within a browser on the iPad.
Joe
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您正在寻找类似 Google 地图的东西，请查看 polymaps，它提供了所有 javascript 代码供您阅读/fork 。
只需在图像顶部绘制线条即可使用 canvas 或 svg 来完成。对我来说，纯 CSS 解决方案听起来需要更多工作。
If you're looking for something Google Maps-like, check out polymaps which provides all the javascript code for you to read/fork.
Just drawing lines on top of an image can be done with either canvas or svg. A CSS-only solution sounds like more work to me.
SVG 创建可通过 DOM 访问的节点，而 canvas 则不然。由于 canvas 不创建 DOM 节点，因此在大多数浏览器中它的渲染速度往往比 SVG 更快。如果您根据用户操作从数据库中提取信息，则使用 SVG 管理事件和操作地图可能会更容易。也就是说，您还可以通过简单地跟踪鼠标相对于画布的位置来处理画布中的用户事件。这意味着将房间等的坐标映射到画布上的 (x,y) 坐标，如果您的需求因任何原因发生变化，这可能会很痛苦。
只是即兴思考，但也许可以将每个房间作为单独的图像单独放置在画布上 - 本质上是将房间组合在一起以构建建筑地图。图像应该放置的位置以及每个房间的图像文件的路径可以作为房间属性存储在数据库中，从而为未来不可预见的意外情况增加了一些灵活性。然后，您可以轻松地在合成图像之上绘制带有上下文 moveto 和 lineTo 的路线。
SVG creates nodes accessible through the DOM, canvas does not. because canvas doesn't create DOM nodes, it tends to render faster than SVG in most browsers. If you are pulling information from a database based on user actions, it may be easier to manage events and manipulate the map using SVG. That said, you can also handle user events in canvas by simply keeping track of mouse position relative to the canvas. That would mean mapping coordinates for the rooms, etc, to (x,y) coordinates on the canvas, which could be a pain if your requirements should change for any reason.
Just thinking off the cuff, but it may be possible to place each room as a separate image individually on the canvas -- essentially compositing the rooms together to build the building map. Where the image should be placed and the path to the image file for each room could be stored in the DB as room attributes, adding some flexibility for unforeseen contingencies down the road. You could then draw your routes w/ context moveto and lineTo on top of the composited images pretty easily.