使用 SVG 和带有链接的 RaphaelJS 在地图上进行交互答案

【问题标题】：Interactivity on map using SVG and RaphaelJS with Links使用 SVG 和带有链接的 RaphaelJS 在地图上进行交互
【发布时间】：2014-07-27 00:28:23
【问题描述】：

我一直在研究使用我在 Illustrator 中创建的自定义美国地图为我的公司创建交互式地图的最简单方法。我找到了这个教程：http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map，它非常完整，将帮助我部分实现我正在寻找的结果。

但是当我想在地图的每个区域添加点击链接和区域悬停文本时呢？

我并不精通 JavaScript，因此我将非常感谢社区的帮助和理解。

【问题讨论】：

虽然您选择反对它可能有很好的（到目前为止，未指明）原因，但您是否考虑过使用 Google 地图？他们有大量的文档、相当好的 API 包装器、不断更新的数据、大量的定制、许多针对他们的教程等等。
我正在为未来的销售团队划分美国地图，我喜欢创建自己的地图并使用它的能力，这就是原因。我阅读了有关谷歌地图和一些功能的信息，但我找不到我正在寻找的东西，即 Raphael 的易用性。我只需要知道是否可以像我的第二段中所述添加指向地图的链接。

标签： javascript svg maps raphael interactive

【解决方案1】：

假设您在 raphael 中定义了一个名为 regionShape 的元素，它对应于地图中的一个区域。添加点击链接应该很容易：

regionShape.node.onclick = function(e) {  
                               window.location.href = "somepage.html";
                           }

为了在悬停时显示文本，我建议使用 jQuery。我通常做的是定义一个div元素#hoverInfo并将其cssdisplay属性设置为none，然后用rafaelnode.onmouseover修改这个属性，像这样：

regionShape.node.onmouseover = function(e) {  
            $("#hoverInfo").css("display", "block");  
        };

然后使用 onmouseout 将其删除：

regionShape.node.onmouseout = function(e) {  
            $("#hoverInfo").css("display", "none");  
        };

【讨论】：

感谢您的帮助！