33

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

例子：

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

如果有人知道执行此操作的完整方法（jQuery 插件、PHP 脚本、矢量图像）或有关如何手动执行此操作的教程，请分享。

4

11 回答 11

44

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

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

披露：我写的。

于 2012-06-29T19:49:08.893 回答
21

Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.

A couple of options if you need something more advanced:

于 2012-06-28T08:55:55.267 回答
7

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

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

  1. 创建一个新的 HTML5 页面
  2. 创建一个新的 SVG 文件，每个可点击区域（省）应该是 SVG 文件中的一个单独的 SVG 多边形，（我使用 Adob​​e 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) 非常好，如果您不想雇用某人或花费自己的时间从刮

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

于 2016-12-02T10:40:14.183 回答
3

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

可点击的 CSS 地图

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

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

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

于 2014-07-15T17:50:38.027 回答
1

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

于 2013-11-10T08:29:46.017 回答
1

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

于 2012-06-27T23:59:58.893 回答
1

我有同样的要求，最后这个地图转换器对我有用。它是任何地图生成的最佳插件。

于 2013-12-27T17:24:08.317 回答
1

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

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

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

于 2016-05-20T10:11:56.487 回答
0

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

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

资源

于 2015-07-29T15:05:13.950 回答
-1

你有很多选择：

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

2 - 您可以使用专用工具，例如clickablemapbuilder（免费）或makeaclickablemap（我认为也是免费的）。

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

于 2015-10-06T16:10:28.573 回答
-2 

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

强文本

于 2016-05-10T05:24:39.547 回答