使用SVG,HTML/CSS,ImageMap创建具有可点击省/州的地图

Question

我正在尝试创建一个交互式地图,用户可以在地图中点击不同的省份以获取该省的特定信息.

示例:http: //www.todospelaeducacao.org.br/ http://code.google.com/p/svg2imap/

到目前为止,我只发现功能有限的解决方案.我只是使用SVG文件搜索过这个,但是如果可能的话,我会对其他文件类型开放.

如果有人知道一个完全功能的方法(jQuery插件,PHP脚本,矢量图像)或如何手动执行它的教程请分享.

Answer 1

用于装饰图像地图的jQuery插件(高亮,选择区域,工具提示):

http://www.outsharked.com/imagemapster/

披露:我写了.

Answer 2

听起来你想要一个简单的imagemap,我建议不要让它比它需要的更复杂.这是一篇关于如何使用svg改进图像映射的文章.在svg本身中做可点击区域非常容易,只需在想要点击的形状周围添加一些<a>元素.

如果您需要更高级的东西,有几种选择:

• http://jqvmap.com/
• http://jvectormap.com/
• http://polymaps.org/

Answer 3

我认为最好将我的答案分为两个部分：

A-从头开始创建所有内容（使用SVG，JavaScript和HTML5）：

1. 创建一个新的HTML5页面
2. 创建一个新的SVG文件，每个可单击区域（省）应该是SVG文件中的一个单独的SVG多边形，（我正在使用Adobe Illustrator创建SVG文件，但您也可以找到许多替代软件产品，例如Inkscape）
3. 将鼠标悬停和单击事件一一添加到多边形

   <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" 
       onmouseover="mouseOverHandler(evt)"
       onclick="clickHandler(evt)" />
   

4. 在JavaScript代码中为每个事件添加处理程序，然后将所需的代码添加到处理程序中

   function mouseOverHandler(evt) {};
   function clickHandler(evt) {};
   

5. 将SVG文件添加到您的HTML页面（我更喜欢嵌入式SVG，但您也可以使用链接的SVG文件）
6. 将文件上传到您的服务器

B-使用FLDraw Interactive Image Creator之类的软件（仅当您拥有地图图像并希望使其具有交互性时）：

1. 创建一个空项目，并在创建新项目时选择地图图像作为基础图像
2. 为每个省添加一个“多边形”元素（从“形状”菜单中）
3. 对于每个多边形，双击它会打开“属性”窗口，您可以在其中选择鼠标悬停的事件类型并单击，还将形状的不透明度更改为0以使其不可见
4. 保存您的项目并将其发布到HTML5，FLDraw将创建一个新文件夹，其中包含您可以上传到服务器的项目所需的所有文件。

如果您是程序员或有个人为您创建所需的代码和SVG文件，则选项（A）非常好；如果您不想雇用某人或花费自己的时间来创建所有内容，则选项（B）非常有用。刮

您还有其他选择，例如使用HTML5 Canvas而不是SVG，但是使用HTML5 Canvas创建Zoomable地图并不是一件容易的事，也许还有其他我不知道的方法。