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，我建议不要让它比它需要的更复杂。这是关于how to improve imagemaps with svg的文章。在svg本身中做可点击区域非常容易，只需添加一些＆lt; a＆gt;。您想要点击的形状周围的元素。

如果您需要更高级的东西，可以选择以下几种方法：

Answer 3

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

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

创建新的HTML5页面
创建一个新的SVG文件，每个可点击区域（省）应该是SVG文件中单独的SVG多边形，（我正在使用Adobe Illustrator创建SVG文件，但您也可以找到许多替代软件产品，例如Inkscape）

逐个添加鼠标悬停并单击事件到您的多边形

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

为JavaScript代码中的每个事件添加处理程序，并将所需的代码添加到处理程序中
```
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
```
将SVG文件添加到HTML页面（我更喜欢内联SVG，但您也可以使用链接的SVG文件）
将文件上传到您的服务器

B - 使用像FLDraw Interactive Image Creator这样的软件（仅当您有地图图片并希望将其设为互动时）：

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

选项（A）非常好，如果您是程序员或者您有人为您创建所需的代码和SVG文件，如果您不想雇用某人或花费您自己的时间从头开始创建所有内容，那么选项（B）是好的

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

Answer 4

万一有人会搜索它 - 我在几个网站上使用它，总是定制和RD的可能性非常适合我需要的东西。简单，可以免费使用：

Clickable CSS Maps

网站上有更多脚本的注意事项：我在Drupal 7中使用地图（用作图形菜单）时遇到了一些令人讨厌的问题。在那里使用了许多其他脚本，并且在处理它们之后，我遇到了问题与地图 - 它仍然没有工作，虽然jquery.cssmap.js，CSS（本地）和脚本在正确的位置。 Firebug向我展示了一个错误，我突然eureka - 一个简单的疏忽，我离开了脚本代码，因为它在示例中并且存在冲突。只需更改前面的功能＆＃34; $＆＃34;到＆＃34; jQuery＆＃34; （或其他处理程序），它的工作完美。：

这是我的想法（当然你可以把它放在之前而不是）：

＆＃13;

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>

＆＃13;

Answer 5

转到SVG to Script 使用SVG，默认输出是SVG中的地图添加事件的代码也会添加，但很容易识别，可以根据需要进行更改。

Answer 6

我已经将makeaclickablemap用于我的省地图已有一段时间了，结果证明它非常合适。

Answer 7

我有相同的要求，最后这个Map converter为我工作。它是任何地图生成的最佳插件。

Answer 8

以下代码可以为您提供帮助：

$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
    alert($(this).attr("id"));
});

Source

Answer 9

这是我为增强图像地图而编写的另一个图像地图插件：https://github.com/gestixi/pictarea

可以轻松突出显示所有区域，并根据区域状态指定不同的样式：正常，悬停，活动，禁用。

您还可以指定可以同时选择的区域数。

Answer 10

你有很多选择：

1 - 如果您可以找到所需地图的SVG文件，则可以使用RaphaelJS或SnapSVG之类的内容为您的州/地区添加点击侦听器，此解决方案是最可定制的...

2 - 您可以使用clickablemapbuilder (free)或makeaclickablemap (i think free also)等专用工具。

[免责声明]我是clickablemapbuilder.com的作者：）

Answer 11

＆＃13;

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>

＆＃13;

强文

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

11 个答案: