Jvectormap highlight Nhiều quốc gia

Question

Tôi hiện đang sử dụng JvectorMap và cố gắng làm nổi bật nhiều quốc gia khi di chuột qua văn bản, tôi đã nhận nó đến một điểm mà nếu tôi di chuột qua từ Châu Phi, nó sẽ làm nổi bật toàn bộ bản đồ, làm cách nào tôi lọc nó để làm nổi bật chỉ Châu Phi khi tôi đang lơ lửng trên tên nội dung của châu Phi.

hiện tôi đang tạo ra một danh sách các lục địa sử dụng một jQuery.each và tôi đang trở về continentCodes, trong đó có tất cả các mã quốc gia (ZA, Mỹ) với một màu giao cho họ ... Tôi đã thử làm như sau:

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

nhưng sau đó tôi lặp lại từng câu và tôi không thể có được lục địa động.

Đây là một JSFIDDLE

Vì vậy Heres 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(); 
}); 

và 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

tôi đã cơ cấu lại mã của bạn, vui lòng xem JSFIDDLE và đây là javascript chỉnh :

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 

}); 

Thưởng thức: D