Jvectormap突出显示多个国家

我目前使用JvectorMap，并试图突出显示多个国家当悬停在文本上时，我已经得到它，如果我将鼠标悬停在非洲这个词上，它会突出显示整个地图，我将如何过滤当我徘徊在非洲的内容名称上时，它只强调了非洲。Jvectormap突出显示多个国家

目前我正在创建使用jQuery.each大洲的名单，我回到continentCodes，它包含了所有分配了一个颜色的国家代码（ZA，美国）的...我试着做以下几点：

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

但是然后我重复每条语句，我无法获得动态大洲。

这里是一个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>

来源

2013-04-25 Marten Terblanche

我已经重构你的代码，请参阅JSFIDDLE这里被修正的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

来源

2013-04-25 14:19:29

Jvectormap突出显示多个国家

回答

相关问题