2014-01-12 64 views
2

我要構建和開發我的學校的交互式地圖。地圖應該是完全互動的,應該有可點擊的事件。當用戶想要查看實驗室詳細信息,他/她應該點擊特定的實驗室區域。因此,可點擊的事件,彈出窗口應該應用於地圖。使用HTML5,CSS3,Javascript創建交互式地圖

我已經用SVG/CSS和HTML5開始了這個任務。而且我到目前爲止搜索了它並且發現了這個有趣的鏈接。 http://jvectormap.com/examples/mall/

如果有人知道一個更好的教程或網站來完成我的任務,這將是非常grateful.If所以請大家分享一些教程/ URL鏈接

感謝

回答

2

因爲我一直在尋找這個,我發現這個有趣的網站,你可以繪製自己的SVG圖像。 http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

您可以輕鬆獲取圖表的svg代碼。

很容易,我們可以集成點擊事件,無論使用svg圖像的Java腳本代碼。乾杯!!

+0

鏈接不工作,新的鏈接工具是:https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor .html – GtEx

0

嘗試FLDraw Interactive Image Creator Lite,它是免費的, 使用它來創建你的學校的一個移動友好的互動式地圖,我已經用它 我的一些項目(非精簡版版,因爲我需要一些先進的功能太)

這真的很簡單:

  1. 啓動一個新項目,並選擇你的學校地圖圖像爲基礎映像
  2. 使用形狀工具來創建一個熱點
  3. 雙擊你的新造型元素打開事件窗口
  4. 選擇一個事件類型(工具提示,圖像信息框,HTML信息框,...)
  5. 保存項目,併發布到HTML5

在瀏覽器中打開已創建的HTML文件。

Sample Interactive Map from their homepage

+0

歡迎來到Stack Overflow!你可以閱讀如何[回答]一個問題。 – Katie