互动世界地图，突出鼠标悬停国家

Question

我需要在网站的首页上创建一个交互式世界地图，视图门户将大约为650x200像素。交互性将包括以下内容，鼠标覆盖一个国家将突出显示（例如，国家将填充“红色”）该国家和显示国家的名称（最好是div中的文本），我也将链接突出显示事件，选中时会突出显示一个国家。

我很难找到合适的解决方案，我拒绝使用或学习闪光等专有技术，因此不能选择。我使用openlayers和自定义地图图像创建了一个简单的模型，但是IE6中的国家标记加载速度太慢。

同样svg看起来太大了，因为我试图使用RaphaelJS，但是当我意识到世界地图数据是1.2mb这对于一个网站的首页是完全不可接受的时候放弃了它。

我真的不知道我将如何做到这一点，我最后的办法是手动创建250+（无论有多少国家）png并将鼠标悬停事件应用于图像中的热点...但这是可能会成为一个死胡同..拼命寻求解决方案，任何有用的评论将不胜感激！

Answer 1

我为此目的开发了jVectorMap。

Answer 2

为什么重新发明轮子。 Google Charts已经这样做了。

Answer 3

我最终选择了Raphael JS，从inkscape中的svg导入所有路径，效果非常好！

Answer 4

您是否将国家坐标数据存储在某处？

如果是这样，设置函数来解析传入的数据并创建250多个路径不应该那个大。

Answer 5

我们开发了Highmaps，与Highcharts相关，可以轻松解决此类数据可视化问题。我们还提供了超过350张地图的map collection，针对尺寸进行了优化，以保持轻量级。

有关下钻示例（在鼠标单击时加载更详细的地图），请参阅this demo。

Highmaps可免费用于非商业用途。