Question

我想使用jQuery和SVG创建一个像http://www.tring.al/harta.html这样的交互式地图，但我不知道从哪里开始。我的地图为.svg.xml（链接在这里：albania.xml）但接下来该怎么做。任何人都可以帮助我下一步该怎么做？

Albania interactive map

Answer 1

示例网站上的许多华丽设计都是在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);
}

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

Answer 2

您可以尝试使用此代码（我是从谷歌地图中获取的）

<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 个答案: