我一直试图找出如何将光标更改为特定区域的手，并仅显示那些区域的标签。
我有这个，但我不知道该怎么做。有人可以帮忙吗？
$(function(){
var RColor = '#007cc4'
var activeRegions = [
"al", "an", "ey", "gh", "ic", "ke", "mu", "mz", "na", "ni", "za", "tz", "tu", "ug"
];
$('#africa-map').vectorMap({
map: 'africa',
backgroundColor: 'transparent',
zoomOnScroll: false,
zoomButtons : false,
regionStyle: {
initial: {
fill: '#b7bdc3',
scaleColors: ['#b7bdc3', '#a2aaad'],
"fill-opacity": 1,
stroke: '#a2aaad',
"stroke-width": 2,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: '#a2aaad'
},
selectedHover: {
fill: '#a2aaad'
}
},
series: {
regions: [{values: {
"al" : RColor,
"an" : RColor,
"ey" : RColor,
"gh" : RColor,
"ic" : RColor,
"ke" : RColor,
"mu" : RColor,
"mz" : RColor,
"na" : RColor,
"ni" : RColor,
"za" : RColor,
"tz" : RColor,
"tu" : RColor,
"ug" : RColor
},
attribute: 'fill'
}]
},
onRegionClick: function(event, code)
{
if (code == "al") {window.location = '$AC:MENUURL:2918$'}
if (code == "an") {window.location = '$AC:MENUURL:2922$'}
if (code == "ey") {window.location = '$AC:MENUURL:2919$'}
if (code == "gh") {window.location = '$AC:MENUURL:2937$'}
if (code == "ic") {window.location = '$AC:MENUURL:2918$'}
if (code == "ke") {window.location = '$AC:MENUURL:2923$'}
if (code == "mu") {window.location = '$AC:MENUURL:2924$'}
if (code == "mz") {window.location = '$AC:MENUURL:2925$'}
if (code == "na") {window.location = '$AC:MENUURL:2926$'}
if (code == "ni") {window.location = '$AC:MENUURL:2927$'}
if (code == "tz") {window.location = '$AC:MENUURL:2929$'}
if (code == "tu") {window.location = '$AC:MENUURL:2930$'}
if (code == "ug") {window.location = '$AC:MENUURL:2931$'}
if (code == "za") {window.location = '$AC:MENUURL:2928$'}
},
onRegionOver: function(event, code)
{
var mouseX;
var mouseY;
$('path.jvectormap-region.jvectormap-element').mousemove( function(e) {
var offset = $('#africa-map').offset();
mouseX = e.pageX- (offset.top)+20;
mouseY = e.pageY- (offset.top)-25;
$(".region-info-box."+code).css({'top':mouseY,'left':mouseX});
});
$(".region-info-box").hide();
$(".region-info-box."+code).css({'top':mouseY,'left':mouseX}).fadeIn('fast');
}
});
});
有一个onRegionOver，但我不知道如何只显示上面列出的区域的手形光标和标签。
以下是此http://jsfiddle.net/a9Xj6/2/ enter link description here
的jsfiddle答案 0 :(得分：3)
实际上，您可以使用onRegionOver事件和onRegionLabelShow进行标签操作。在回调中返回false将停止执行该函数，在这种情况下，我们可以在悬停区域时停止执行标签呈现。
要将光标更改为hand，您可以使用javascript完成此操作。
document.body.style.cursor = 'pointer';
一些示例代码可以帮助您进一步：
var regionResults = {
"AL" : RColor,
"AN" : RColor,
"EY" : RColor,
"GH" : RColor,
"IC" : RColor,
"KE" : RColor,
"MU" : RColor,
"MZ" : RColor,
"NA" : RColor,
"NI" : RColor,
"ZA" : RColor,
"TZ" : RColor,
"TU" : RColor,
"UG" : RColor
};
new jvm.WorldMap({
// your map settings
series: {
regions: [{
values: regionResults,
attribute: 'fill'
}]
},
onRegionOver: function(e, code) {
if (regionResults.hasOwnProperty(code)) {
// the hovered region is part of the regionResults, show hand cursor
document.body.style.cursor = 'pointer';
}
},
onRegionOut: function(e, code) {
// return to normal cursor
document.body.style.cursor = 'default';
},
onRegionLabelShow: function(e, label, code) {
if (!regionResults.hasOwnProperty(code)) {
// the hovered region is not part of the regionResults, don't show the label
e.preventDefault();
return false;
}
}
});
更新＃1
以下是整合2个问题的代码更新。
$(function() {
var RColor = '#007cc4',
activeRegions = {
"AL" : RColor,
"AN" : RColor,
"EY" : RColor,
"GH" : RColor,
"IC" : RColor,
"KE" : RColor,
"MU" : RColor,
"MZ" : RColor,
"NA" : RColor,
"NI" : RColor,
"ZA" : RColor,
"TZ" : RColor,
"TU" : RColor,
"UG" : RColor
};
$('#africa-map').vectorMap({
map: 'africa',
backgroundColor: 'transparent',
zoomOnScroll: false,
zoomButtons: false,
regionStyle: {
initial: {
fill: '#b7bdc3',
scaleColors: ['#b7bdc3', '#a2aaad'],
"fill-opacity": 1,
stroke: '#a2aaad',
"stroke-width": 2,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: '#a2aaad'
},
selectedHover: {
fill: '#a2aaad'
}
},
series: {
regions: [{
values: activeRegions,
attribute: 'fill'
}]
},
onRegionClick: function(event, code)
{
code = code.toLowerCase();
if (code == "al") {
window.location = '$AC:MENUURL:2918$';
}
if (code == "an") {
window.location = '$AC:MENUURL:2922$';
}
if (code == "ey") {
window.location = '$AC:MENUURL:2919$';
}
if (code == "gh") {
window.location = '$AC:MENUURL:2937$';
}
if (code == "ic") {
window.location = '$AC:MENUURL:2918$';
}
if (code == "ke") {
window.location = '$AC:MENUURL:2923$';
}
if (code == "mu") {
window.location = '$AC:MENUURL:2924$';
}
if (code == "mz") {
window.location = '$AC:MENUURL:2925$';
}
if (code == "na") {
window.location = '$AC:MENUURL:2926$';
}
if (code == "ni") {
window.location = '$AC:MENUURL:2927$';
}
if (code == "tz") {
window.location = '$AC:MENUURL:2929$';
}
if (code == "tu") {
window.location = '$AC:MENUURL:2930$';
}
if (code == "ug") {
window.location = '$AC:MENUURL:2931$';
}
if (code == "za") {
window.location = '$AC:MENUURL:2928$';
}
},
onRegionOver: function(event, code)
{
if (activeRegions.hasOwnProperty(code)) {
// the hovered region is part of the regionResults, show hand cursor
document.body.style.cursor = 'pointer';
}
var mouseX;
var mouseY;
$('path.jvectormap-region.jvectormap-element').mousemove(function(e) {
var offset = $('#africa-map').offset();
mouseX = e.pageX - (offset.top) + 20;
mouseY = e.pageY - (offset.top) - 25;
$(".region-info-box." + code).css({'top': mouseY, 'left': mouseX});
});
$(".region-info-box").hide();
$(".region-info-box." + code).css({'top': mouseY, 'left': mouseX}).fadeIn('fast');
},
onRegionOut: function(e, code) {
// return to normal cursor
document.body.style.cursor = 'default';
},
onRegionLabelShow: function(e, label, code) {
if (!activeRegions.hasOwnProperty(code)) {
// the hovered region is not part of the regionResults, don't show the label
e.preventDefault();
return false;
}
}
});
});
答案 1 :(得分：0)
使用简单的css修复可以实现向区域添加指针样式：
path.jvectormap-region {
cursor: pointer;
}