Jqvmap编程

Question

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

我想对我的地图做的是在它下面有一个国家列表，这样当有人悬停其中一个列出的国家时，匹配的国家就会在地图上突出显示(ie.changes颜色)。

我想要实现的结果的一个例子可以在这里看到：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'
    });
 });

但现在我不知道如何实现这种双向突出显示的结果。有谁有主意吗？

Answer 1

您可以操作各个路径。

您需要先知道路径的ID。API会自动生成ID，第一个映射称为'jqvmap1_ pathname '，等等。路径名是国家/地区代码。只需使用firebug来检查您的情况下的id是什么，只是为了确保。

然后，您只需向任何id或类添加一个如下所示的简单函数：

jQuery('#links').mouseover(function(){
    jQuery('#jqvmap1_mc').attr('style', 'fill:#f00');
});

Answer 2

旧帖子，但当我偶然发现它时，它听起来像是一个有趣的小测试项目，所以我设置了一个。您可以在此处查看它的工作原理- 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 events上执行相反的操作，设置与悬停状态的id匹配的标签项。

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

check it out