将自定义区域与 JQVmap 结合使用

我正在使用 JQVmap (https://github.com/manifestinteractive/jqvmap https://github.com/manifestinteractive/jqvmap）以输出站点上的地图。我不想将鼠标悬停在每个国家/地区时执行某些操作，而是希望将它们分组为区域。例如，当您将鼠标悬停在其中任何一个上并进行一组国家/地区时，我希望这三个国家都显示悬停状态，而不是加拿大、美国和墨西哥。我看过很多关于如何为国家/地区集着色的帖子，但每个国家/地区仍然有自己的悬停状态，并且不会触发具有相同颜色的其他国家/地区的悬停状态。有任何想法吗？

我正在做一个项目，需要这样做。我是这样做的。

1. 定义您想要的区域。
2. 添加辅助方法来突出显示/取消突出显示一个区域中所有国家/地区的国家/地区。
3. 将这些辅助方法添加为地图的“onRegionOver”和“onRegionOut”方法。

Step 1.

这是我定义区域的方式。

var regionMap = {
        "southAmerica" :{
        "countries" : ["ar", "bo", "br", "cl", "co", "ec", "fk", "gy", "gf", "pe", "py", "sr", "uy", "ve"],
        "name" : "South America"
    },
        "northAmerica" :{
        "countries" : ["ca", "gl", "us"],
        "name" : "Northern America"
    }
}; //And so on...

我还添加了一个地图和一个用于反向查找的方法。

var countryMap = {
    "ca":"northAmerica",
    "gl":"northAmerica",
    "us":"northAmerica",
}; //And so on...
function getRegion(cc) {
    var regionCode = countryMap[cc];
    return regionMap[regionCode];
}

或者，您可以避免反向查找映射并编写一个函数：

function getCountriesInRegion(cc) {
    for (var regionKey in regions)
    {
        var countries = regionMap[regionKey].countries;
        for (var countryIndex in countries)
        {
            if (cc == countries[countryIndex])
            {
                return countries;
            }
        }
    }
}

Step 2

用于突出显示/取消突出显示区域的辅助方法：

function highlightRegionOfCountry (cc) {
    var countries = getRegion(cc).countries;
    for (countryIndex in countries)
    {
        $('#vmap').vectorMap('highlight',countries[countryIndex]); 
    }
    $('#vmap').vectorMap('highlight',cc);
}

function unhighlightRegionOfCountry (cc) {
    var countries = getRegion(cc).countries;
    for (countryIndex in countries)
    {
        $('#vmap').vectorMap('unhighlight',countries[countryIndex]);    
    }
    $('#vmap').vectorMap('unhighlight',cc);
}

Step 3.

添加将辅助方法注册到地图的悬停事件。

jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#333333',
        color: '#ffffff',
        hoverOpacity: 0.2,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: true,
        onRegionOver : function (element, code, region)
        {
            highlightRegionOfCountry(code);
        },
        onRegionOut : function (element, code, region)
        {
            unhighlightRegionOfCountry(code);
        }
    });
});

tl;dr：使用这些：

$('#vmap').vectorMap('highlight', countryCode);

and

$('#vmap').vectorMap('unhighlight', countryCode); 

我的项目所需的区域是联合国定义的区域。你可以看看我的 JVQmap 分支GitHub https://github.com/radzinzki/jqvmap/tree/3c0213c9a9b2e8480cc530514676e34ff42a6265。您要查看的文件是/jqvmap/maps/jquery.vmap.un_regions.js https://github.com/radzinzki/jqvmap/blob/3c0213c9a9b2e8480cc530514676e34ff42a6265/jqvmap/maps/jquery.vmap.un_regions.js.

我希望这有帮助！