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

Posted 2023-05-08

【中文标题】使用 SVG、HTML/CSS、ImageMap 创建带有可点击省份/州的地图

【英文标题】：Create a map with clickable provinces/states using SVG, HTML/CSS, ImageMap

【发布时间】：2012-06-29 11:14:01

【问题描述】：

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

例子：

存档：http://www.todospelaeducacao.org.br/

存档：http://code.google.com/p/svg2imap/

到目前为止，我只找到了功能有限的解决方案。我只是使用 SVG 文件真正搜索过这个，但如果可能的话，我会打开其他文件类型。

如果有人知道一种功能齐全的方法（jQuery 插件、php 脚本、矢量图像）或有关如何手动操作的教程，请分享。

【参考方案1】：

用于装饰图像地图的jQuery插件（高光、选择区域、工具提示）：

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

披露：我写的。

【讨论】：

谢谢！这似乎对我来说效果最好......我使用 Illustrator 制作了图像映射，现在我正在研究我从你的 jquery 插件中得到的东西来控制发生的事情..

已经坏了一天了。这个问题是两年前回答的。抱歉，我昨天没有时间修复它。

【参考方案2】：

听起来你想要一个简单的图像映射，我建议不要让它变得比它需要的更复杂。这是一篇关于how to improve imagemaps with svg 的文章。在 svg 本身中创建可点击区域非常容易，只需在您希望可点击的形状周围添加一些 元素。

如果您需要更高级的东西，有几个选项：

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

【讨论】：

很好的例子，但是 FF 中的文本经常出现乱码（Chrome 看起来不错）。可能是FF渲染器有点慢，可惜了……

这是最好的答案。 jqvmap 和 jvectormap 正是我想要的。 @CapelliC，他们在 FF 26 中工作得很好。还有This one is pretty good

【参考方案3】：

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

---

A-从头开始创建所有内容（使用 SVG、javascript 和 html5）：

创建一个新的 HTML5 页面 创建一个新的 SVG 文件，每个可点击区域（省）应该是您的 SVG 文件中的一个单独的 SVG 多边形， （我使用 Adob​​e 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 将创建一个新文件夹，其中包含您可以上传到服务器的项目所需的所有文件。

---

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

您还有其他一些选择，例如使用 HTML5 Canvas 代替 SVG，但使用 HTML5 Canvas 创建可缩放地图并不容易， 也许还有其他一些我不知道的方法。

【参考方案4】：

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

Clickable CSS Maps

关于网站上更多脚本的注意事项：我在 Drupal 7 中使用地图（用作图形菜单）时遇到了一些烦人的问题。那里使用了许多其他脚本，在处理它们之后，我被卡住了使用地图 - 它仍然无法正常工作，尽管 jquery.cssmap.js、CSS（都是本地的）和脚本在正确的位置。 Firebug 向我显示了一个错误，我突然发现了 - 一个简单的疏忽，我将脚本代码保留在示例中，并且发生了冲突。只需将前面的函数“$”更改为“jQuery”（或其他处理程序），它就可以完美运行。 :]

这是我要说的（当然你可以把它放在前面而不是前面）：

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

【参考方案5】：

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

【讨论】：

我似乎无法让它工作...我可以让 SVG 转换为代码，并设法通过 Illustrator 从文件中获取 SVG 代码，但我无法包装带有锚标记的 SVG 路径。

嗯，您从 SVG 中提取代码。这必须与您生成的内容合并。你能告诉我文件的名称，我会四处寻找吗？

您可以在此 URL 找到我尝试使用的确切 SVG：unidosporlaeducacion.com/images/panama.svg

它是一个非常复杂的 SVG 文件...我应该使用更简单的吗？我可以在 AI 中创建一个简化的艺术品

【参考方案6】：

一段时间以来，我一直在使用makeaclickablemap 绘制我的省份地图，结果证明它非常适合。

【参考方案7】：

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

【参考方案8】：

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

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

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

【参考方案9】：

以下代码可能对您有所帮助：

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

Source

【参考方案10】：

你有很多选择：

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

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

[免责声明]我是clickablemapbuilder.com的作者:)

【参考方案11】：

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

强文本