阿尔巴尼亚的交互式地图答案

【问题标题】：Interactive map of Albania阿尔巴尼亚的交互式地图
【发布时间】：2014-10-26 22:05:34
【问题描述】：

我想使用 jQuery 和 SVG 创建像 http://www.tring.al/harta.html 这样的交互式地图，但我不知道从哪里开始。我将地图作为 .svg.xml （此处链接：albania.xml）但下一步该做什么。谁能帮我下一步该怎么做？

Albania interactive map

【问题讨论】：

标签： jquery xml html svg

【解决方案1】：

你可以试试这个代码（我是从谷歌地图上得到的）

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3062273.914005372!2d20.116626437500003!3d41.45002910144466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x13453bf3bd274c2d%3A0x77ce589d6983bee!2sAlbania!5e0!3m2!1sen!2suk!4v1409673218830"
    width="600" height="450" frameborder="0" style="border:0">
</iframe>

【讨论】：

【解决方案2】：

示例网站上的许多华丽设计都是用 css 完成的。

其中一个形状如下所示：

<a xlink:href="../hartalezha.html" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><path fill="#84d858" stroke="#ffffff" d="**Removed points**" stroke-width="3.5200000000000005" stroke-linejoin="round" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: default; stroke-linejoin: round;"></path></a>

css 负责处理悬停动作，例如颜色变化等。在这里，html 直接处理单击时的重定向（没有花哨的 jQuery）。

如果你想在没有重定向的情况下做一些额外的事情，jQuery 唯一需要的是一个形状被点击的监听器。

编辑：这是路径标签的可能css：

path{
fill: rgb(64, 129, 195);
stroke: rgb(255, 255, 255);
stroke-width: 3.5200000000000005px;
stroke-linejoin: round;
}

path:hover{
 fill: rgb(225,0, 129, 100);
}

这将覆盖单个形状悬停时的填充颜色。

【讨论】：

谢谢你，但你能告诉我一个如何为特定城市做悬停状态的例子吗？我应该使用剪辑还是什么？
每个城市都是一个路径标签，因此只需在 css 中使用 path:hover 样式即可。如果您说想要在菜单上列出城市，并在单击名称时突出显示城市，则需要 javascript。在这种情况下，我会给每个路径一个 id="city_name" 并添加一个 on_click(toggle("city_name") 函数。