Jvectormap highlight Mehrere Länder

Question

Ich benutze derzeit JvectorMap und versuche, mehrere Länder zu markieren, wenn ich über Text schwebe, ich habe es zu einem Punkt, wo ich die gesamte Karte markieren, wenn ich über das Wort Afrika, wie würde ich filtern Es soll nur Afrika hervorheben, wenn ich über den Inhaltsnamen Afrikas schwebe.

derzeit Ich bin eine Liste der Kontinente die Schaffung eines jQuery.each mit und ich bin wieder continentCodes, die alle Ländercodes (ZA, US) mit einer Farbe, die ihnen zugewiesen enthält ... Ich habe versucht, die folgenden Aktionen ausführen:

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

aber dann wiederhole ich jede Aussage und ich kann keine dynamischen Kontinente bekommen. Hier

ist ein JSFIDDLE

So Heres die 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(); 
}); 

und die HTML:

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

Answer 1

ich Ihren Code neu strukturiert haben, wenden Sie sich bitte JSFIDDLE sehen und hier wird die korrigierte 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 

}); 

Genießen: D