9

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

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

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

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

4

5 回答 5

19

为此，我开发了jVectorMap。

于 2011-05-12T17:10:56.073 回答
6

为什么要重新发明轮子。谷歌图表已经这样做了。

于 2010-04-26T21:27:42.523 回答
5

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

于 2010-05-14T04:16:03.750 回答
1

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

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

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

各国人口历史 默兹河的流域

于 2014-06-25T12:31:45.813 回答
0

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

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

于 2010-04-27T15:57:18.837 回答