Jvectormap突出显示多个国家/地区 [英] Jvectormap highlight Multiple countries
问题描述
我目前正在使用 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
这篇关于Jvectormap突出显示多个国家/地区的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!