阿尔巴尼亚的互动地图

Question

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

Albania interactive map

Answer 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> 

Answer 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); 
} 

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