Jvectormap突出显示多个国家/地区

本文介绍了Jvectormap突出显示多个国家/地区的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我目前正在使用 JvectorMap 并尝试在悬停在文本上时突出显示多个国家/地区，我已将其提升到一定程度如果我将鼠标悬停在非洲这个词上，它将突出显示整个地图，当我将鼠标悬停在非洲的内容名称上时，我将如何过滤它以突出显示非洲。

I am currently using JvectorMap and trying to highlight multiple countries when hovering over text, I have gotten it to a point where if i hover over the word Africa, it will highlight the entire map, how would i filter it to highlight only Africa when i am hovering over the content name of Africa.

目前我正在使用 jQuery.each 创建一个大陆列表，我将返回 continentCodes ，其中包含所有分配了颜色的国家/地区代码（ZA，US）...我尝试过以下操作：

currently i am creating a list of continents using a jQuery.each and i am returning continentCodes, which contains all of the country codes (ZA, US) with a color assigned to them... I have tried doing the following:

jQuery('.continentLink').hover(function() { jQuery.each(mapObject.mapData.paths, function(i, val) { if (val.continent == "africa"){ continentCodes[i] = "#3e9d01"; mapObject.series.regions[0].setValues(continentCodes); } }); });

然后我重复每个陈述，我无法获得动态的大陆。

but then i am repeating the each statement and i can not get dynamic continents.

这是 JSFIDDLE

所以继续JS：

jQuery(function(){ //JSON MARKERS var markers = [{latLng: [-34.033333300000000000, 23.066666700000040000], name: 'Knysna', info:'its got a lake...'}, {latLng: [-33.924868500000000000, 18.424055299999963000], name: 'Cape Town', info:'its nice...'}]; //JSON MARKERS //JSON STYLING var markerStyle = {initial: {fill: '#F8E23B',stroke: '#383f47'}}; var regionStyling = {initial: {fill: '#128da7'},hover: {fill: "#A0D1DC"}}; //JSON STYLING //GLOBAL VARIABLES var countryList = "", continentList = ""; var continentCodes = {}; //GLOBAL VARIABLES //INIT MAP PLUGIN jQuery('#world-map').vectorMap({ map: 'world_mill_en', normalizeFunction: 'polynomial', markerStyle:markerStyle, regionStyle:regionStyling, backgroundColor: '#383f47', series: {regions: [{values: {},attribute: 'fill'}]}, markers: markers, onRegionClick:function (event, code){ jQuery('#world-map').vectorMap('set', 'focus', code); }, onMarkerClick: function(events, index){ jQuery('#infobox').html(markers[index].name); } }); //INIT MAP PLUGIN var mapObject = jQuery('#world-map').vectorMap('get', 'mapObject'); //LIST COUNTRIES & CONTINENTS function createList() { //Get list jQuery.each(mapObject.mapData.paths, function(i, val) { countryList += '<li><a id='+i+' class="countryLink">'+val.name+'</a></li>'; continentList += '<li><a id='+val.continent+' class="continentLink">'+val.continent+'</a></li>'; continentCodes[i] = "#3e9d01"; return continentCodes; }); //display continents jQuery('#continentList').html(continentList); //display countries jQuery('#countryList').html(countryList); //Create Hover Function jQuery('.continentLink').hover(function() { mapObject.series.regions[0].setValues(continentCodes); console.log(continentCodes); }); //Create ZOOM Function jQuery('.countryLink').click(function(e) { jQuery('#world-map').vectorMap('set', 'focus', this.id); }); } createList(); });

和HTML：

<div id="world-map" style="width: 960px; height: 400px"></div> <div id="infobox"></div> <ul id="continentList"></ul> <ul id="countryList"></ul>

推荐答案

我重构了你的代码，请看 JSFIDDLE ，这里是更正后的javascript：

I have restructured your code, please see JSFIDDLE and here is the corrected javascript:

jQuery(function(){ //JSON MARKERS var markers = [{latLng: [-34.033333300000000000, 23.066666700000040000], name: 'Knysna', info:'its got a lake...'}, {latLng: [-33.924868500000000000, 18.424055299999963000], name: 'Cape Town', info:'its nice...'}]; //JSON MARKERS //JSON STYLING var markerStyle = {initial: {fill: '#F8E23B',stroke: '#383f47'}}; var regionStyling = {initial: {fill: '#128da7'},hover: {fill: "#A0D1DC"}}; //JSON STYLING //GLOBAL VARIABLES var countryList = "", continentList = ""; var resultsDup = {}; var continentCodes = {}; //GLOBAL VARIABLES //INIT MAP PLUGIN jQuery('#world-map').vectorMap({ map: 'world_mill_en', normalizeFunction: 'polynomial', markerStyle:markerStyle, regionStyle:regionStyling, backgroundColor: '#383f47', series: {regions: [{values: {},attribute: 'fill'}]}, markers: markers, onRegionClick:function (event, code){ jQuery('#world-map').vectorMap('set', 'focus', code); }, onMarkerClick: function(events, index){ jQuery('#infobox').html(markers[index].name); } }); //INIT MAP PLUGIN var mapObject = jQuery('#world-map').vectorMap('get', 'mapObject'); //LIST COUNTRIES & CONTINENTS jQuery.each(mapObject.mapData.paths, function(i, val) { countryList += '<li><a id='+i+' class="countryLink">'+val.name+'</a></li>'; //remove duplicate continents var resultsList = val.continent; if (resultsDup[resultsList]) { jQuery(this).remove(); }else{ resultsDup[resultsList] = true; continentList += '<li><a id='+val.continent+' class="continentLink">'+val.continent+'</a></li>'; } //remove duplicate continents }); //display countries jQuery('#countryList').html(countryList); //display continents jQuery('#continentList').html(continentList); var continentId ="" function getID(continentId){ jQuery.each(mapObject.mapData.paths, function(i, val) { if (val.continent == continentId){ continentCodes[i] = "#3e9d01"; mapObject.series.regions[0].setValues(continentCodes); } }); } function removeGetID(continentId){ jQuery.each(mapObject.mapData.paths, function(i, val) { if (val.continent == continentId){ continentCodes[i] = "#128da7"; mapObject.series.regions[0].setValues(continentCodes); } }); } //LIST COUNTRIES & CONTINENTS TEMP jQuery('.continentLink').hover(function(e) { continentId = this.id; getID(continentId); }, function(){ removeGetID(continentId); }); //Zoom to Country Function jQuery('.countryLink').click(function(e) { jQuery('#world-map').vectorMap('set', 'focus', this.id); }); //Continent Hover function });

享受：D