การใช้ขอบเขตที่กำหนดเองกับ 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

ฉันหวังว่านี่จะช่วยได้!