Menggunakan wilayah khusus dengan JQVmap

Saya sedang mengerjakan sebuah proyek dan perlu melakukan ini. Begini cara saya melakukannya.

1. Tentukan wilayah yang Anda inginkan.
2. Tambahkan metode pembantu untuk menyorot/tidak menyorot negara dari semua negara di suatu wilayah.
3. Tambahkan metode pembantu ini sebagai metode "onRegionOver" dan "onRegionOut" pada peta.

Langkah 1.

Inilah cara saya mendefinisikan wilayah.

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...

Saya juga menambahkan peta dan metode untuk pencarian terbalik.

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

Alternatifnya, Anda dapat menghindari peta pencarian terbalik dan menulis fungsi sebagai gantinya:

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

Langkah 2

Metode pembantu untuk menyorot/tidak menyorot wilayah:

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);
}

Langkah 3.

Menambahkan pendaftaran metode pembantu ke acara hover peta.

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: Gunakan ini:

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

Dan

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

Wilayah yang saya butuhkan untuk proyek saya adalah wilayah yang ditentukan oleh PBB. Anda dapat melihat cabang JVQmap saya di GitHub. File yang ingin Anda lihat adalah /jqvmap/maps/jquery .vmap.un_regions.js.

Semoga membantu!