jqVmap在悬停时选择整个区域，然后单击，使用类切换

时间：2016-11-16 04:30:58

标签： jquery jqvmap

我正在尝试使用StackOverflow（https://stackoverflow.com/a/21825653/5580153）上的解决方案扩展jqvmaps，关于选择整个区域而不是单个国家/地区。

目标：

1 - 当你翻过地图上的区域（即非洲，东南亚等）时，我正试图让一组div增长和缩小。整个区域应该突出显示，正确的div应该添加/删除一个改变它样式的类。

2 - 此外，当点击/选择区域时，添加的课程应该保留，直到它被取消选中。

3 - 反转也应该发生，当您翻转div时，相关区域应突出显示。我已经从我的codepen中删除了我为此所做的那些小事，因为我所做的事情阻止了整个地图的加载......现在不是最高优先级，而是“很好”。

问题： 我让整个地区在短时间内突出显示，但由于某种原因，它将重新回到突出个别国家。我试图删除我的修改，直到它恢复到这种行为，但无法确定我做了什么。

我需要一些帮助来解决我做错的事情，以便整个区域重新突出显示？ 另外，我似乎无法使onRegionSelect函数按照我的预期方式工作。

var countryMap = {

"bs":"caribbean",
"dm":"caribbean",
"ag":"caribbean",
"ds":"caribbean",
"bb":"caribbean",
"cu":"caribbean",
"dn":"caribbean",
"do":"caribbean",
"gd":"caribbean",
"ht":"caribbean",
"jm":"caribbean",
"kn":"caribbean",
"lc":"caribbean",
"tt":"caribbean",

"bi": "Africa",
"km": "Africa",
"dj": "Africa",
"er": "Africa",
"et": "Africa",
"ke": "Africa",
"mg": "Africa",
"mw": "Africa",
"mu": "Africa",
"mz": "Africa",
"re": "Africa",
"rw": "Africa",
"sc": "Africa",
"so": "Africa",
"ug": "Africa",
"tz": "Africa",
"zm": "Africa",
"zw": "Africa",
"ao": "Africa",
"cm": "Africa",
"cf": "Africa",
"td": "Africa",
"cg": "Africa",
"cd": "Africa",
"gq": "Africa",
"ga": "Africa",
"st": "Africa",
"dz": "Africa",
"eg": "Africa",
"ly": "Africa",
"ma": "Africa",
"sd": "Africa",
"tn": "Africa",
"bw": "Africa",
"ls": "Africa",
"na": "Africa",
"za": "Africa",
"sz": "Africa",
"bj": "Africa",
"bf": "Africa",
"cv": "Africa",
"ci": "Africa",
"gm": "Africa",
"gh": "Africa",
"gn": "Africa",
"gw": "Africa",
"lr": "Africa",
"ml": "Africa",
"mr": "Africa",
"ne": "Africa",
"ng": "Africa",
"sn": "Africa",
"sl": "Africa",
"tg": "Africa",

"by": "centralAsiaEasternEurope",
"bg": "centralAsiaEasternEurope",
"cz": "centralAsiaEasternEurope",
"hu": "centralAsiaEasternEurope",
"pl": "centralAsiaEasternEurope",
"md": "centralAsiaEasternEurope",
"ro": "centralAsiaEasternEurope",
"ru": "centralAsiaEasternEurope",
"sk": "centralAsiaEasternEurope",
"ua": "centralAsiaEasternEurope",

"cn":"southEastAsia",
"kp":"southEastAsia",
"jp":"southEastAsia",
"mn":"southEastAsia",
"kr":"southEastAsia",
"bn":"southEastAsia",
"kh":"southEastAsia",
"tl":"southEastAsia",
"id":"southEastAsia",
"la":"southEastAsia",
"my":"southEastAsia",
"mm":"southEastAsia",
"ph":"southEastAsia",
"th":"southEastAsia",
"vn":"southEastAsia",
"pg":"southEastAsia",
"fj":"southEastAsia",
"sb":"southEastAsia",
"vu":"southEastAsia",
"nc":"southEastAsia",
"tw":"southEastAsia",

"bz": "latinAmerica",
"cr": "latinAmerica",
"sv": "latinAmerica",
"gt": "latinAmerica",
"hn": "latinAmerica",
"mx": "latinAmerica",
"ni": "latinAmerica",
"pa": "latinAmerica",
"ar": "latinAmerica",
"bo": "latinAmerica",
"br": "latinAmerica",
"cl": "latinAmerica",
"co": "latinAmerica",
"ec": "latinAmerica",
"fk": "latinAmerica",
"gy": "latinAmerica",
"gf": "latinAmerica",
"pe": "latinAmerica",
"py": "latinAmerica",
"sr": "latinAmerica",
"uy": "latinAmerica",
"ve": "latinAmerica",

"af": "southAsia",
"bd": "southAsia",
"bt": "southAsia",
"in": "southAsia",
"ir": "southAsia",
"kz": "southAsia",
"kg": "southAsia",
"mv": "southAsia",
"np": "southAsia",
"pk": "southAsia",
"lk": "southAsia",
"tj": "southAsia",
"tm": "southAsia",
"uz": "southAsia",

"az": "middleEast",
"am": "middleEast",
"cy": "middleEast",
"ge": "middleEast",
"iq": "middleEast",
"il": "middleEast",
"jo": "middleEast",
"kw": "middleEast",
"lb": "middleEast",
"om": "middleEast",
"qa": "middleEast",
"sa": "middleEast",
"sy": "middleEast",
"tr": "middleEast",
"ae": "middleEast",
"ye": "middleEast",

"ca": "OECD",
"gl": "OECD",
"us": "OECD",
"au": "OECD",
"nz": "OECD",
"pf": "OECD",
"dk": "OECD",
"ee": "OECD",
"fi": "OECD",
"is": "OECD",
"ie": "OECD",
"lv": "OECD",
"lt": "OECD",
"no": "OECD",
"se": "OECD",
"gb": "OECD",
"al": "OECD",
"ba": "OECD",
"hr": "OECD",
"gr": "OECD",
"it": "OECD",
"mt": "OECD",
"pt": "OECD",
"si": "OECD",
"es": "OECD",
"mk": "OECD",
"rs": "OECD",
"at": "OECD",
"be": "OECD",
"fr": "OECD",
"de": "OECD",
"nl": "OECD",
"ch": "OECD",

};
var regionMap = {
"caribbean" : {
    "countries" : ["bs", "dm", "ag", "ds", "bb", "cu", "dn", "do", "gd", "ht", "jm", "kn", "lc", "tt"],
    "name" : "Caribbean"
},
"centralAsiaEasternEurope" : {
    "countries" : ["by", "bg", "cz", "hu", "pl", "md", "ro", "ru", "sk", "ua"],
    "name" : "Central-Asia-Eastern-Europe"
},
"southEastAsia" : {
    "countries" : ["bn", "kh", "tl", "id", "la", "my", "mm", "ph", "th", "vn","cn", "kp", "jp", "mn", "kr","fj","sb","vu", "nc","pg","tw"],
    "name" : "East-Asia-South-East-Asia"
},
"southAsia" : {
    "countries" : ["af", "bd", "bt", "in", "ir", "kz", "kg", "mv", "np", "pk", "lk", "tj", "tm", "uz"],
    "name" : "South-Asia"
},
"middleEast" : {
    "countries" : ["az", "am", "cy", "ge", "iq", "il", "jo", "kw", "lb", "om", "qa", "sa", "sy", "tr", "ae", "ye"],
    "name" : "Middle-East"
},
"Africa" : {
    "countries" : ["bj", "bf", "cv", "ci", "gm", "gh", "gn", "gw", "lr", "ml", "mr", "ne", "ng", "sn", "sl", "tg","bw", "ls", "na", "za", "sz","bi", "km", "dj", "er", "et", "ke", "mg", "mw", "mu", "mz", "re", "rw", "sc", "so", "ug", "tz", "zm", "zw","ao", "cm", "cf", "td", "cg", "cd", "gq", "ga", "st","dz", "eg", "ly", "ma", "sd", "tn","bw", "ls", "na", "za", "sz"],
    "name" : "Sub-Saharan-Africa"
},
"latinAmerica" :{
    "countries" : ["bz", "cr", "sv", "gt", "hn", "mx", "ni", "pa","ar", "bo", "br", "cl", "co", "ec", "fk", "gy", "gf", "pe", "py", "sr", "uy", "ve"],
    "name" : "Latin-America"
},
"OECD" : {
    "countries" : ["dk", "ee", "fi", "is", "ie", "lv", "lt", "no", "se", "gb","al", "ba", "hr", "gr", "it", "mt", "pt", "si", "es", "mk", "rs","at", "be", "fr", "de", "nl", "ch","ca", "gl", "us","au", "nz", "pf"],
    "name" : "Northern-Europe"
}
};

// helper functions

function getRegion(cc) {
var regionCode = countryMap[cc];
return regionMap[regionCode];
};

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

function highlightRegionOfCountry (cc) {
  var countries = getRegion(cc).countries;
  var countryName = getRegion(cc).name;

  for (countryIndex in countries)
  {
    $('#vmap').vectorMap('highlight',countries[countryIndex]);
  }

  $('#vmap').vectorMap('highlight',cc);
  // console.log(countryName);
  $("."+countryName).addClass('grow');

    };

    function unhighlightRegionOfCountry (cc) {
  var countries = getRegion(cc).countries;
  var countryName = getRegion(cc).name;

  for (countryIndex in countries)
  {
    $('#vmap').vectorMap('unhighlight',countries[countryIndex]);
  }

  $('#vmap').vectorMap('unhighlight',cc);
 $("."+countryName).removeClass('grow');
};


jQuery(document).ready(function() {

  // region data



        // render map
        jQuery('#vmap').vectorMap({
            map: 'world_en',
            backgroundColor: '#fff',
            color: '#ffffff',
            borderOpacity: 0.1,
            hoverOpacity: 0.7,
            selectedColor: '#666666',
            scaleColors: ['#dedede', '#0e6a9e'],
            selectedColor: '#118cd1',
            values: sample_data,
            normalizeFunction: 'polynomial',
            enableZoom: false,
            showTooltip: true,
       // grow percentage box and highlight region
            onRegionOver : function (element, code, region)
            {
                highlightRegionOfCountry(code);
            },
  // ungrow percentage box and highlight region 
            onRegionOut : function (element, code, region)
            {
                unhighlightRegionOfCountry(code);
            },
    // Toggle percentage block on/off on click
        onRegionSelect : function (element, code, region)
            {
                highlightRegionOfCountry(code);
            }

        });
    });

这里有一个codepen：http://codepen.io/anon/pen/mOrOjP

我知道它有点乱，虽然任何帮助肯定会受到赞赏！谢谢！

0 个答案:

没有答案
相关问题
最新问题