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

我一直在研究用Illustrator中创建的自定义美国地图为我的公司创建交互式地图的最简单方法。我发现这篇教程非常完整，它将帮助我部分地达到我想要的效果

但是，当我想在地图的每个区域添加单击链接和悬停文本时，会怎么样呢

---

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

假设您有一个名为

regionShape

的元素，该元素在raphael中定义，对应于地图中的一个区域。单击时添加链接应该很容易：

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

为了在悬停时显示文本，我建议使用jQuery。我通常会定义一个div元素

#hoverInfo

，并将其css

display

属性设置为

none

，然后使用rafael

节点修改该属性。onmouseover

，如下所示：

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

然后使用onmouseout将其删除：

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

---

虽然你选择反对它可能有好的（到目前为止，没有具体说明）理由，但你考虑过使用谷歌地图吗？他们有大量的文档，相当好的API包装，不断更新的数据，大量的定制，许多教程等等。我为未来的销售团队划分了美国地图，我喜欢创建自己的地图并使用它的能力，这就是原因。我读过谷歌地图和一些功能，但我找不到我想要的东西，那就是Raphael的易用性。我只是想知道是否有可能像我在第二段中所说的那样添加地图链接。谢谢你的帮助！