交互式世界地图，鼠标悬停时突出显示国家答案

【问题标题】：Interactive World Map, highlight countries on mouseover交互式世界地图，鼠标悬停时突出显示国家
【发布时间】：2011-02-12 14:32:29
【问题描述】：

我需要在网站的首页创建一个交互式世界地图，查看门户大约为 650x200 像素。交互性将包括以下内容，将鼠标悬停在一个国家/地区将突出显示（例如，国家将用“红色”填充）该国家并显示国家/地区的名称（最好是 div 中的文本），我还将链接带有 a 的突出显示事件，在选中时将突出显示一个国家/地区。

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

另外 svg 似乎太大了，因为我尝试使用 RaphaelJS，但是当我意识到世界地图数据为 1.2mb 时放弃了它，这对于网站的首页来说是完全不可接受的..

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我有所有大写字母的坐标，我在 openlayers 中做了很少的标记，但在 IE6 中太慢了（20% 的网站访问者）我最好坚持使用 OpenLayers 作为解决方案在过去的一两周里变得非常喜欢它......
VML 可能适用于您想要的。看来你最担心的是IE6

【解决方案3】：

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

【讨论】：

【解决方案4】：

我为此开发了jVectorMap。

【讨论】：

【解决方案5】：

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

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

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

【讨论】：