2011-03-24 46 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的路線。