互動世界地圖，鼠標懸停

Question

亮點國家，我需要創建一個網站的頭版上的互動世界地圖，認爲門戶網站將是大約650x200像素。交互性將包括以下內容：鼠標懸停在一個國家將突出顯示的國家（例如，這些國家將實際上充滿了「紅色」），並顯示國家的名稱（最好是文本在div中），我也將鏈接突出顯示的事件將突出顯示選定的國家/地區。

我有困難的時候找到一個合適的解決方案，我拒絕使用或學習proprietry技術如閃存，所以它不是一個選項。我使用openlayers和一個自定義地圖圖像創建了一個簡單的模型，但是在IE6中這些國家的標記加載得太慢了。

而且SVG似乎過大，因爲我試圖用RaphaelJS，但abondoned它，當我意識到世界地圖數據是1.2MB這完全是對聯合國網站的頭版接受..

我對於我如何去做這件事真的很茫然，我的最後一招是手動創建250多個（但是很多國家都有）PNG，並將鼠標懸停事件應用到圖像中的熱點區域......但這可能會是一個死衚衕..拼命尋求解決方案，任何有用的意見將不勝感激！

Answer 1

我finaly與RaphaelJS定居，在Inkscape中從SVG導入所有路徑，工作得非常好！

Answer 2

爲什麼要重新發明輪子。 Google Charts已經這樣做了。

Answer 3

您是否將國家/地區座標數據存儲在某處？

如果是這樣設置函數來解析通過的數據並創建250+路徑不應該是那大。

Answer 4

我開發jVectorMap用於這一目的。

Answer 5

我們開發了Highmaps，與Highcharts有關，可以輕鬆解決這樣的數據可視化問題。我們還提供超過350張地圖的map collection，針對尺寸進行了優化以保持輕量級。

對於深入分析例如（裝載在鼠標單擊詳細地圖）看到this demo。

Highmaps是免費的非商業用途。