0

我正在使用插件 jqvmap http://www.jqvmap.com/。

我想用我的地图做的是在它下面有一个国家列表，这样当有人悬停在列出的国家之一时，匹配的县会在地图上突出显示（即改变颜色）。

我想达到的结果的一个例子在这里可见：http ://www.supermagnete.ch/eng/select_country.php?origin=conditions

在这里，当用户将一个国家悬停在列表上时，匹配的国家会在地图上突出显示。它是双向的：当用户将一个国家悬停在地图上时，它会在列表中突出显示。

到目前为止，这是我的 HTML 代码：

<div id="vmap" style="width: 680px; height: 520px;"></div>
<div id="links"><ul><li><a href="CH" onclick="return false;">Switzerland</a></li><li><a href="FR" onclick="return false;">France</a></li></ul></div>

这就是我在 jQuery 中初始化地图的方式：

jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
        map: 'europe_en',
        enableZoom: false,
        showTooltip: true,
        backgroundColor: '#cccccc'
    });
 });

但现在我不知道如何实现这种双向突出的结果。有人有想法吗？

4

2 回答 2

0

您可以操纵各个路径。

您需要先知道路径的 ID。API 自动生成 ID，第一张地图称为“jqvmap1_pathname”等。路径名是国家/地区代码。只需使用萤火虫检查您的情况下的 id 是什么，以确保。

比你可以添加一个像这样的简单函数到任何 id 或类：

jQuery('#links').mouseover(function(){
    jQuery('#jqvmap1_mc').attr('style', 'fill:#f00');
});
于 2014-11-18T15:05:24.913 回答
0

旧帖子，但是当我偶然发现它时，它听起来像是一个有趣的小测试项目，所以我设置了一个。你可以在这里查看这个工作 - http://jqvdemo.beta-sites.com/

基本上我的想法是给你的标签名称（在我的例子中是美国）一个与地图代码匹配的 id。所以例如 <h4 id="ca">California</h4>

然后在 Document.Ready 上添加一个侦听器，用于悬停在列表中的任何项目上，这将在与悬停项目中的两位数代码匹配的任何状态上设置颜色

$("#stateList h4").hover(
    function () {
        var code = $(this).attr('id');
        $('#vmap').vectorMap('set', 'colors', { [code]: '#0000ff' });
    }, function () {
        var code = $(this).attr('id');
        $('#vmap').vectorMap('set', 'colors', { [code]: '#f4f3f0' });
    }
);

然后在地图上的 onRegionOver 和 onRegionOut 事件上，通过设置与悬停状态的 id 匹配的标签项来执行相反的操作。

onRegionOver: function (event, code, region) {
    $("#"+code).css("color", "yellow");
},
onRegionOut: function (event, code, region) {
    $("#" + code).css("color", "#000");
}

一探究竟

于 2015-10-23T23:40:41.113 回答