使用SVG、HTML/CSS和ImageMap创建带有可单击省/州的地图

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

例如：

存档：

存档：

到目前为止，我只找到功能有限的解决方案。我只使用SVG文件搜索过它，但如果可能的话，我会对其他文件类型开放

如果有人知道这个jQuery插件、PHP脚本、矢量图像或如何手动执行的教程的完整功能，请与我们分享。

转到 对于SVG，默认输出是SVG中的映射

---

添加事件的代码也会被添加，但很容易识别，并且可以根据需要进行更改。

听起来你想要一个简单的图像映射，我建议不要让它变得比需要的更复杂。这里有一篇关于你的文章。在svg中创建可点击区域非常容易，只需添加一些

---

用于装饰图像贴图高亮显示、选择区域和工具提示的jQuery插件：

---

披露：是我写的

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

我也有同样的要求，最后这对我很有效。它是任何地图生成的最佳插件。

以防万一，任何人都会搜索它-我在几个网站上使用过它，定制和研发的可能性总是非常适合我的需要。简单且可免费使用：

关于站点上更多脚本的一个注意事项：我在Drupal7中使用一个图形菜单的地图时遇到了一些恼人的问题。在那里使用了许多其他脚本，在处理它们之后，我被地图困住了——它仍然不起作用，尽管jquery.cssmap.js、CSS都是本地的，而且脚本都在正确的位置。Firebug向我显示了一个错误，我突然发现了eureka——一个简单的疏忽，我将脚本代码保留在示例中，出现了冲突。只需将前端函数$更改为jQuery或其他处理程序，它就可以完美地工作。：]

这是我的意思，当然你可以把它放在前面，而不是：

jQueryfunction${ $'map-country'.cssMap{'size'：810}； };

---

以下代码可能会帮助您：

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

---

对此，您有很多选择：

1-如果您可以找到所需地图的SVG文件，您可以使用或之类的方法为您的州/地区添加单击侦听器，此解决方案是最可自定义的

2-您可以使用专用工具，如或

[免责声明]我是的作者：

jQueryfunction${ $'map-country'.cssMap{'size'：810}； };

---

下面是我为增强图像贴图而编写的另一个图像贴图插件：

它可以轻松高亮显示所有区域，并允许您根据区域的状态指定不同的样式：正常、悬停、活动和禁用

---

您还可以指定同时可以选择多少个区域。

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

A-使用SVG、JavaScript和HTML5从头开始创建一切：

创建新的HTML5页面 创建一个新的SVG文件，每个可点击区域都应该是SVG文件中一个单独的SVG多边形， 我使用AdobeIllustrator创建SVG文件，但您也可以找到许多其他软件产品，例如 将鼠标悬停并单击事件逐个添加到多边形

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

将SVG文件添加到HTML页面我更喜欢内联SVG，但也可以使用链接的SVG文件 将文件上载到服务器 B-仅当您有地图图像并希望使其具有交互性时，才使用类似的软件：

创建一个空项目，并在创建新项目时选择地图图像作为基础图像 从“形状”菜单中为每个省添加多边形元素 对于每个多边形，双击它以打开“属性”窗口，在该窗口中可以选择鼠标悬停的事件类型，然后单击， 同时将形状不透明度更改为0以使其不可见 保存项目并将其发布到HTML5，FLDraw将创建一个新文件夹，其中包含项目所需的所有文件，您可以将这些文件上载到服务器。 如果您是程序员或有人为您创建所需的代码和SVG文件，那么选项A非常好， 如果你不想雇人或花自己的时间从头开始创造一切，那么选择B是很好的

您还有一些其他选项，例如使用HTML5画布而不是SVG，但是使用HTML5画布创建可缩放的地图并不容易，

---

也许还有其他一些我不知道的方法。

我似乎无法让它起作用。。。我可以将SVG转换为代码，并通过Illustrator从文件中获取SVG代码，但我无法用锚标记包装SVG路径。嗯，从SVG中提取代码。这必须与您生成的内容合并。你能告诉我文件的名字吗？我会到处找的。你可以

---

我正试图在这个URL上使用的SVG：它是一个非常复杂的SVG文件。。。我应该用一个更简单的吗？我可以在Aince示例中创建一个简化的艺术品，但文本在FF Chrome中经常被乱码。也许它有点慢，真遗憾……这是最好的答案。jqvmap和jvectormap正是我想要的@当然，他们在FF 26中工作得很好。也谢谢！这似乎对我最有效。。。我用Illustrator制作了图像地图，现在我正在研究从你的jquery插件中得到的东西，以控制发生的事情。它已经坏了一天了。这个问题两年前就得到了回答。对不起，我昨天没时间修。

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