Использование пользовательских регионов с JQVmap

Я работал над проектом, и мне нужно было это сделать. Вот как я это сделал.

1. Определите нужные регионы.
2. Добавьте вспомогательные методы для выделения/снятия выделения стран из всех стран в регионе.
3. Добавьте эти вспомогательные методы в качестве методов onRegionOver и onRegionOut карты.

Шаг 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;
            }
        }
    }
}

Шаг 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);
}

Шаг 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);

и

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

Регионы, которые мне были нужны для моего проекта, были регионами, определенными ООН. Вы можете взглянуть на мой форк JVQmap на GitHub. Файл, который вам нужно посмотреть, это /jqvmap/maps/jquery. .vmap.un_regions.js.

Надеюсь, это поможет!